将布尔值传递给 v-for 循环

Question

如何将 v-for 循环中的 access/convert element.varName 字符串作为变量名传递以获取此布尔值的当前值。

在以下情况下：

<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
    },
    /...
]

我的 included class 怎么可能是一个布尔值而不是实际的字符串，最初我尝试使用 shortName 访问它如下：

element.shortName 这没有用，也试过： [element.shortName] 也： this[element.shortName] None 其中似乎有效，所以我尝试通过将它添加到对象 varName: this.el1 中来包括对该变量的实际引用，但也没有用。

我做错了什么？

Answer 1

varName: this.el1 未在 data 选项中更新的原因是因为它不是反应式的。

您可以在 Vue 官方文档中阅读相关内容 here。

回到你的问题:

尝试在 mounted() 生命周期挂钩中分配整个 elements 数组。因此，您可以访问 this.el1.

演示：

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>

Answer 2

由于您在其他数据中引用数据属性，因此您应该将第二个属性定义为计算属性 :

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
    }
   ]
  }
}

将布尔值传递给 v-for 循环

Passing boolean value to v-for loop

vue.js

vuejs3