CODEWITHSUNDEEP
vue.js
Michael
Michael

Reputation: 168

Generate dynamic DATA variables with VUE array

I'm trying to define dynamic variables for VUE, and then use them inv-for. when I load the page they work, but if they change their values later, the values in the view do not change anymore.

VUE

const app = new Vue({
    el: '#mainCreate',
    data: {
        modules : [],
        feature: []
    },
});

I am using this function to generate the variables within feature:

    function creatDataFeatures() {
        $.each(app.modules, function(index,module){
            app.feature[index] = module.features;
        });
    }

So I'm loading it in the view:

<table class="table table-striped mt-3">
   <tbody>
      <tr v-for="feat in feature[index]">
           <td>
              <input type="checkbox" checked>
          </td>
           <td>
              @{{feat.title}}
           </td>
           <td class="text-info">
              @{{feat.price ? '$ '+feat.price : '$ 0'}}
           </td>
        </tr>
   </tbody>
</table>

When loading the page I load the data correctly, but if I then change the ejm values: feature [index] = [other array] (I change it for the same data format as the start ones) in the view does not change anything. a solution or an alternative would be great.

Upvotes: 1

Views: 6968

Answers (1)

acdcjunior
acdcjunior

Reputation: 135862

The line app.feature[index] = module.features; falls into limitation of Vue regarding arrays.

To fix, use:

    $.each(app.modules, function(index,module){
        Vue.set(app.feature, index, module.features); // changed this line
    });

See Vue - Array Change Detection - Caveats:

Due to limitations in JavaScript, Vue cannot detect the following changes to an array:

  1. When you directly set an item with the index, e.g. vm.items[indexOfItem] = newValue
  2. When you modify the length of the array, e.g. vm.items.length = newLength

To overcome caveat 1, both of the following will accomplish the same as vm.items[indexOfItem] = newValue, but will also trigger state updates in the reactivity system:

// Vue.set
Vue.set(vm.items, indexOfItem, newValue)

Upvotes: 2

Related Questions