Reactivity not working inside the loop for unknown reason in vuejs

Question

I'm struggling to get working the reactivity in vue.js inside the loop. Loop is rendering without any issue, But, when trying to fire an event it updates the content but not visible or render data in the page.

I've used the latest version of vue.js with bootstrap and jquery. I've tried adding key in the loop item but not working. But, when to update any other content by using v-model then it works.

Markup

<div id="app">

  <div class="props">
    <div class="prop-item" v-for="prop in modules.variations.properties">
      <p>=== <strong v-text="prop.name"></strong> ===</p>
      <ul>
        <li v-for="value in prop.values" @click="activeProp(prop,value)">
          <span v-text="value.name"></span>
        </li>
      </ul>
    </div>
  </div>

  <input type="text" v-model="message">

<pre>{{ actives }}</pre>
<pre>{{ message }}</pre>
</div>

<script>
window.spdata = {
   "variations":{
      "properties":[
         {
            "id":1,
            "name":"Color",
            "values":[
               {
                  "id":1,
                  "name":"Black",
               },
               {
                  "id":2,
                  "name":"Red",
               },
               {
                  "id":3,
                  "name":"Blue",
               }
            ]
         },
         {
            "id":2,
            "name":"Size",
            "values":[
               {
                  "id":4,
                  "name":"XL",
               },
               {
                  "id":5,
                  "name":"XXL",
               },
               {
                  "id":6,
                  "name":"XXXL",
               },
            ]
         },
         {
            "id":3,
            "name": "Type",
            "values":[
               {
                  "id":8,
                  "name":"Premium",
               },
               {
                  "id":9,
                  "name":"Standard",
               },
               {
                  "id":10,
                  "name":"Luxary",
               }
            ]
         }
      ]
   }
};
</script>

Javascript


new Vue({
  el: "#app",
  data: {
    modules: window.spdata,
    actives: {},
    message: '',
  },

  created() {
    this.modules.variations.properties.forEach((prop) => {
      this.actives[prop.id] = null
    });
  },

  methods: {
    activeProp(prop, val) {
      if (this.actives[prop.id] === val.id) {
        this.actives[prop.id] = null;
      } else {
        this.actives[prop.id] = val.id;
      }
    }
  }
})

Vue will not notice you changing members of this.actives. Change detection caveats — Roy J
– Roy J, Commented Aug 1, 2019 at 14:45
@RoyJ Yes, that true. I've used Vue.$set() but forget to use in the created section and that is the issue. Thank you for notice. — Aminul Islam
– Aminul Islam, Commented Aug 1, 2019 at 14:59

bbsimonbb · Accepted Answer · 2019-08-01 14:45:01Z

1

It looks like you need to be using Vue.set() to update an array inside your methods block, not the square bracket syntax. You should also provide a :key for elements inside your v-for loop. This is good hygiene whenever dealing with loops and arrays.

answered Aug 1, 2019 at 14:45

bbsimonbb

29.3k18 gold badges92 silver badges129 bronze badges

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

1 Comment

Aminul Islam Over a year ago

Great! Just solved. I did forget to use Vue.$set() in one place and that place kills my day. Thank you so much.

Collectives™ on Stack Overflow

Reactivity not working inside the loop for unknown reason in vuejs

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related