Generate dynamic DATA variables with VUE array

Question

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.

tony19 · Accepted Answer · 2022-07-15 23:46:52Z

2

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:

When you directly set an item with the index, e.g. vm.items[indexOfItem] = newValue

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)

edited Jul 15, 2022 at 23:46

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Mar 12, 2018 at 23:40

acdcjunior

136k37 gold badges340 silver badges312 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Generate dynamic DATA variables with VUE array

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related