Question

我有一个基于这样的计算属性渲染的表。注意每行如何根据其内容获取其样式。这很有用。

computed: { rows: function () { return this.$store.getters.tableRows; }, ... }

<tr v-for="row in rows" v-bind:class="rowClass(row)">
  <td v-for="(item, key, index) in row.columns" v-bind:class="classy(index)">{{item}}</td>
</tr>

我还想在表格之外添加集合信息，因此我设置了以下消息条件。

computed: {
  finished: function () {
    return this.rows.length === 5;
  },
  whoopsie: function () {
    return this.rows[this.rows.length - 1].columns.elapsed < 0;
  }, ...
}

<div v-if="finished" class="alert alert-success">Done.</div>
<div v-if="whoopsie" class="alert alert-warning">Oops.</div>

第一个按预期工作。但是，第二个引发了一个错误，无法读取属性＆＃39;列＆＃39;未定义的，看起来很疯狂，因为我可以清楚地看到屏幕上的数据和长度属性绝对不是零。

我尝试使用 debugger 命令在那里捅，但似乎没有在代码的那一部分调用。我知道代码被执行了，因为将返回false 更改为返回true 确实会产生差异。并且调试器似乎可以在代码中的其他位置工作。奇怪的...

我尝试将值存储到全局变量中，如下所示。从控制台窗口中读取该变量可以精确地生成我期望的值。我无法理解那里发生了什么，但它肯定是一些黑魔法。

whoopsie: function () {
  window.wtf = this.rows[this.rows.length - 1];
  // return true;
  return false;
}, ...

如何获取计算属性中的值？
为什么它不像一个理智的人那样做呢？
如何在那里调用调试器？

修改

商店有以下吸气剂。

tableRows: function(state) { return state.dataTable.rows; }

它被分配给以下对象。数据中的每一行都有一个ID和一个容器 columns 。

const rows = [];
for (let i = 0; data && i < data.length; i++)
rows.push({
  id: data[i].id,
  columns: {
    ...
    elapsed: recalculate(data[i].span)
  }
});

我想绑定到两个计算属性，如果表中的行数为5（ 已完成）并且的值已经过去< / em>在最后一行是否定的（＆＃39; s woopsie ）。这就是为什么我要宣布那两个（而且只有第一个工作）。

Answer 1

此特定代码中出现错误，您不能(item, key, index)与v-for一起使用对象数组，该语法仅可用with object，请参阅{{3} }。

所以你需要以下内容：

<tr v-for="row in rows" v-bind:class="rowClass(row)">
  <td v-for="(item, index) in row.columns" v-bind:class="classy(index)">{{item}}</td>
</tr>

在通过v-if绑定时无法访问getter中的数据，但是在Vue中由v-for呈现时可以访问

1 个答案: