I have an array property:
arrayList: {
type: Array,
value:[
{id:"1",candy:"Reeces"},
{id:"1",candy:"M&M"},
{id:"1",candy:"KitKat"},
{id:"1",candy:"Twizzlers"}
]
}
and a boolean property
forceRerender: {
type: Boolean,
value: false
}
I call them in a Dom-Repeat to populate the HTML:
<template is="dom-repeat" as="candy" items="[[getCandyList(arrayList, forceRerender)]]">
<div id="[[candy.id]]" class="candy-row" data="[[candy]]" on-tap="selectCandy">
</template>
The selectCandy()
function looks like this:
selectCandy(event) {
let arr = this.arrayList;
for(let j = 0, i = 0; j < arr.length; j++) {
if(arr[j].select) {
let temp = arr[i];
arr[i] = arr[j];
arr[j] = temp;
i++;
}
}
this.set('forceRerender', !this.forceRerender);
}
And my getter:
getCandyList(arr,forceRerender) {
return arr;
}
My selectCandy()
effectively rearranges the arrayList
, but does not visually update the HTML content to represent this. I can't seem to figure out why.
I've made a separate array and used that to change values. I've made a local array and pushed to that and returned it. I've rewritten the order in which things are done. Separated the sections up multiple times to review each portion individually.
I've been at this for at least 3 hours and I'm lost. Can't anyone explain to me here what I'm doing wrong?
I have discovered the solution:
getCandyList(arr,forceRerender) {
let rowList = [];
for(let j = 0, i = 0; j < arr.length; j++) {
if(arr[j].select) {
let temp = arr[i];
arr[i] = arr[j];
arr[j] = temp;
i++;
}
}
arr.forEach(function(object) {
rowList.push(object);
}.bind(this));
return rowList;
}
and
selectCandy(event) {
this.set('forceRerender', !this.forceRerender);
}
moral of the story here is do all the stuff you wanna do to your objects and arrays in the get function.