Question

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

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>

这个“有效”，但我收到了错误：

vue.js？3de6：2902 TypeError：无法读取未定义的属性'0'（...）

这是因为我觉得阵列太迟了？我将我的数组设置为：test [1] [2] ='true'，但在某处我应该使用Vue.set。但是，我似乎无法使用正确的语法将其与二维数组一起使用。

有关实现此目的的正确方法的任何建议吗？

Answer 1

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

选项1

如果您可以在首次创建组件时访问2d阵列所需的所有数据（即没有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类

1 个答案: