[Vuejs]-VueJS and lodash, filtered array displays empty unless main array is utilized in template

by

2👍

✅

I think your use case is linked to the reactivity system of VueJS.

https://v2.vuejs.org/v2/guide/reactivity.html

If you delete the line

<h1>Total charges: {{charges.length}}</h1>

you tell to VueJS to refresh your template only on catCharges get / set.

catCharges is an array, and so it’s not as ‘reactive’ as a simple variable.

If you read precisely https://v2.vuejs.org/v2/guide/list.html#Caveats, prefer use a push on your catCharges to explain correctly to Vue that your array has changed.

I’ll try this code :

getCharges() {
  axios.get('admin/charges').then((response) => {
    this.charges = response.data;
    for(let offense = 1; offense <= this.offenses.length; offense++) {
      this.catCharges.push(this.chargesAtOffense(offense));
    }
  });
},

Hope this will solve your problem.

👤Mathieu D.

Leave a comment