Passing boolean value to v-for loop

Question

How can I access/convert element.varName string in v-for loop to be passed as variable name to get the current value of this boolean.

In the following case:

<div v-for="(element, index) in elements" :key="index" :class="{included : element.varName, 'cur-el':selected==element.shortName}">
    <div v-html="element.icon"></div>
    {{element.name}}
</div>

---

el1: false,
el2: false,
selected: undefined,
elements: [
    {
        name: 'element 1',
        icon: `<svg>
                <path></path>
                <rect></rect>
            </svg>`,
        shortName: 'el1',
        varName: this.el1
    },
    /...
]

How can my included class be a boolean value instead of the actual string, initially I tried with the shortName used accessing it as follow:

element.shortName which didn't work, also tried: [element.shortName] as well as: this[element.shortName] None of which seems to work, so I tried including the actual reference to that variable by adding it in the object varName: this.el1, which also didn't work.

What am I doing wrong?

Answer 1

Since you're referencing a data property in other one you should define the second property as computed property :

data(){
  return {
   el1: false,
   el2: false,
   selected: undefined,
 }
},
computed:{
  elements(){
   return [
    {
        name: 'element 1',
        icon: `<svg>
                <path></path>
                <rect></rect>
            </svg>`,
        shortName: 'el1',
        varName: this.el1
    }
   ]
  }
}

Answer 2

The reason why varName: this.el1 is not updated inside data option, is because it's not reactive.

You can read about that in Vue official documentation here.

Back to your question :

Try to assign the whole elements array in mounted() life cycle hook. So, that you can access this.el1.

Demo :

new Vue({
  el:"#app",
  data: {
    el1: false,
    el2: true,
    elements: []
  },
  mounted() {
    this.elements = [
      {
        name: 'element 1',
        shortName: 'el1',
        varName: this.el1
      }, {
        name: 'element 2',
        shortName: 'el2',
        varName: this.el2
      }
    ]
  }
});

.included {
  background-color: yellow
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div v-for="(element, index) in elements" :key="index" :class="{included : element.varName}">
    {{element.name}}
</div>
</div>