动态数组 v-bind class

Question

我正在尝试对二维数组的值设置为 true 的项目设置 class。该数组如下所示：

test[item][day]

它是在一个方法中创建和设置的。

模板：

<div>
 <div v-for="item in items" class="item-row">
     <div class="item-name">item: {{ item.id }}</div>
     <div v-for="day in days" class="item-header" v-bind:class="{'activeDay' : test[item.id][day]}">{{ day }}</div>
  </div>
</div>

这个'works'，但我确实得到一个错误：

vue.js?3de6:2902 TypeError: Cannot read property '0' of undefined(…)

我猜这是因为数组填充得太晚了？我将我的数组设置为：test[1][2] = 'true'，但在我应该使用 Vue.set 的地方阅读。但是，我似乎无法获得将其用于二维数组的正确语法。

关于实现此目标的正确方法有何建议？

Answer 1

由于问题似乎与呈现组件时未填充的内容有关，因此只需控制模板何时呈现此二维数组或何时填充其内容即可。

选项 1

如果在首次创建组件时您可以访问二维数组所需的所有数据（即没有 ajax 请求数据）。然后只需将对构建数组的方法的调用移动到组件创建的方法中，即

created () {
  this.buildItems()
},
...

选项 2

如果您需要通过 ajax 请求数据或由于某些其他原因无法在创建的方法中填充数组，则只需设置一个参数来指示它何时构建并控制其渲染，即

# template
<div v-if="itemsReady" v-for="item in items" class="item-row">

# script
data () {
  return {
    itemsReady: false, // set to true when you have built the items array
    ...
  },
},
methods: {
  buildItems () {
    ... // logic to build array
    this.itemsReady = true
  },
  ...
},

动态数组 v-bind class

Dynamic array v-bind class

multidimensional-array

vuejs2