CODEWITHSUNDEEP
vue.jsvuejs2
user431619
user431619

Reputation:

Toggle in loop?

I wish to toggle (show/hide) a list when clicking on a title, but cant get the following to work

I have this: 

          <!-- Title -->
          <div v-for="(subitem, index) in item" v-if="index === 0" @click="toggle(subitem)">
            {{subitem.system_name}} - ({{item.length}})
          </div>

          <!-- All title items that should expand on click "Title" -->
          <div v-if="subitem.clicked">
            <p>{{subitem.system_name}}</p>
          </div>

When clicking on the im triggering a toggle function called toggle, that sets a property on the item "clicked" to true or false (I should mention that this property does not already exist on the object, and I haven't got the possiblity add it, as we get the JSON from an API)

The toggle function is this:

toggle: function (data) {
    data.clicked = !data.clicked;
  },

Now, when I do this above, I get an error saying: "Property or method "subitem" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option"

Im guessing I get this because the "clicked" property doesnt exist in the object... So how do I work around this? Can't see any real solution ?

Upvotes: 1

Views: 1108

Answers (1)

Vamsi Krishna
Vamsi Krishna

Reputation: 31352

You initialize subitem in the v-for as a single item in the loop, but you are using it outside the element which has v-for loop on it. That's the reason you get that warning:

Property or method "subitem" is not defined on the instance but referenced during render.
Make sure to declare  reactive data properties in the data option"

So move the div you want to toggle inside the div which has the v-for loop on it

      <!-- Title -->
      <div v-for="(subitem, index) in item" v-if="index === 0" @click="toggle(subitem)">
        {{subitem.system_name}} - ({{item.length}})
        
         <!-- All title items that should expand on click "Title" -->
          <div v-if="subitem.clicked">
              <p>{{subitem.system_name}}</p>
          </div>
      </div>

And coming yo the 2nd issue, as you mention the subitem obj does not have clicked property when you fetch the json from api.

You cannot add root level reactive properties after the vue instance is created.

Since you want to toggle the appeance of the div based on the property clicked which is not available at the time vue instance is created you should use vm.$set() to add reactive properties or Object.assign() to add properties to existing object. See Reactivity in depth

So in your case

toggle: function (data) {
    if(data.hasOwnProperty('clicked')){
        data.clicked = !data.clicked;
    }else{
        //since its the first time , set the value pf clicked to true to show the subitem
        data = Object.assign({}, data, {clicked: true});
    }
    
  },

Upvotes: 1

Related Questions