0

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

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>

第一个按预期工作。但是，第二个给我一个错误，无法读取 undefined 的属性“列”，这看起来很疯狂，因为我可以清楚地看到屏幕上的数据并且长度属性绝对不为零。

我尝试使用调试器命令在那里四处寻找，但似乎没有在代码的那部分调用。我知道代码会被执行，因为将return false更改为return true确实会产生差异。调试器似乎可以在代码的其他地方工作。诡异的...

我试图将值存储到全局变量中，如下所示。从控制台窗口插入该变量会产生我期望的值。我不明白那里发生了什么，但这绝对是一些黑魔法。

whoopsie: function () {
  window.wtf = this.rows[this.rows.length - 1];
  // return true;
  return false;
}, ...
  1. 我可以做些什么来获得计算属性中的值？
  2. 为什么它不做一个理智的人所期望的？
  3. 如何在那里调用调试器？

编辑

商店有以下吸气剂。

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

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

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

我想绑定到两个计算属性，如果表中的行数为 5（即完成），并且如果最后一行的elapsed值为负（即woopsie），这两个计算属性将为真。这就是为什么我要宣布这两个（并且只有第一个在工作）。

4

1 回答 1

0

对我来说，这个特定代码中似乎有错误，你不能(item, key, index)使用v-for对象数组，该语法仅适用于 object，请参阅fiddle。

所以您需要以下内容：

<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>
于 2016-12-27T16:31:32.860 回答