通过v-if绑定时无法访问getter中的数据，但在Vue中通过v-for渲染时可以访问 [英] Can't access data in getter when binding by v-if but can access when rendered by v-for in Vue

问题描述

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

I have a table that renders based on computed properties like this. Notice how each row gets its style based on its contents. This works dandy.

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>

我还想在表外添加集体信息，因此我设置了以下消息传递条件.

I also wanted to add a collective info outside of the table, so I set up the following messaging conditional.

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>

第一个按预期工作.但是，第二个向我抛出了一个错误，即无法读取未定义的属性列"，这看起来很疯狂，因为我可以清楚地看到屏幕上的数据和 length 属性绝对不是零.

The first one works just as expected. However, the second one throws me an error that cannot read property 'columns' of undefined, which looks insane as I can clearly see the data on the screen and the length property is definitely not zero.

我尝试使用 debugger 命令在那里查看，但似乎没有在代码的那部分调用它.我知道代码被执行是因为将 return false 更改为 return true 确实会产生差异.而调试器似乎在代码的其他地方也能工作.奇怪...

I tried to use debugger command to poke around there but it seems not to be invoked at that part of the code. I know the code gets executed because changing return false to return true does render a difference. And debugger seems to work at other places in the code. Weird...

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

I tried to store the value to a global variable as shown below. Poking in that variable from console window produces precisely the values I was expecting. I can't understand what's going on there but it's definitely some black magic.

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

1. 我该怎么做才能获得计算属性中的值?
2. 为什么它不能达到正常人所期望的效果?
3. 如何在其中调用调试器?

编辑

商店有以下 getter.

The store has the following getter.

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

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

It's being assigned to the following object. Each row in the data has an ID and a container 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(即 finished)并且 elapsed 的值在最后一行是负数(即 woopsie).这就是为什么我要声明这两个(并且只有第一个有效).

I want to bind to two computed properties that will be true if the number of rows in the table is 5 (that's finished) and if the value of elapsed on the last of the rows is negative (that's woopsie). That why I'm declaring those two (and only the first one's working).

推荐答案

在我看来这个特定的代码有错误，You can not have (item, key, index) with v-对于 对象数组，该语法仅可用 对于对象，请参阅fiddle.

Error seems in this particular code to me, You can not have (item, key, index) with v-for with an array of objects, that syntax is only available with object, see the 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>

这篇关于通过v-if绑定时无法访问getter中的数据，但在Vue中通过v-for渲染时可以访问的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！