Question

我可能正在做一些密集的事情，但是现在我已经把头撞了一下。我想我想在这里问别人是否可以看到我要去哪里。

所以，这得到了一些简化，但是本质上我使用的是vue.js并有一个v-for循环来制作一个漂亮的列表，但是我想使用循环值作为参数来访问另一个多维对象的数据密钥：

<li v-for="bar in foo.bars">{{ list[bar].name }}</li>

data中的列表定义如下：

list: {
  "somekey":{"name":"Joe Bloggs","email":"joe.bloggs@"},
  "someotherkey":{"name":"John Doe","email":"john.doe@"},
  "anotherkey":{"name":"A N Other","email":"a.n.other@"}
  etc.
},

bars本身也是多维的，但是具体细节在这里并不重要。重要的是，结果bar的值是list的键。

这会导致以下控制台警告/错误：

vue.js：597 [Vue警告]：渲染错误：“ TypeError：无法读取未定义的属性'名称'” TypeError：无法读取未定义的属性“名称”

但是我是否使用：

<li v-for="bar in foo.bars">{{ list[bar] }}</li>

我没有收到任何错误，并且输出如下：

{“名称”：“ Joe Bloggs”，“电子邮件”：“ joe.bloggs @”}
{“ name”：“ John Doe”，“ email”：“ john.doe @”}
等

这是我所期望的。同样，如果我使用：

<li v-for="bar in foo.bars">{{ list['anotherkey'].name }}</li>

我明白了

{“名称”：“ A N其他”，“电子邮件”：“ a.n.other @”}

这也是我所期望的。因此，所有对象数据都在那里并且可以访问（并且似乎可以通过控制台和Vue DevTools附加组件访问），而并非在使用list[bar].name（或list[bar][name]，list[bar].email时）等）在v-for中，这有点让人头疼。

有什么想法吗？

谢谢！

Answer 1

如OP在注释中所述，data property = list由axios创建或异步更新。

为了避免出现错误vue.js:597 [Vue warn]: Error in render: "TypeError: Cannot read property 'name' of undefined"，一种解决方案是使用v-if以确保{{ list[bar].name }}仅在bar in list时才呈现。

因此，您应该将模板更改为以下内容：

<li v-for="bar in foo.bars" v-if="list[bar]">{{ list[bar].name }}</li>

Answer 2

因此，感谢@Sphinx的建议，这是所有代码荣耀的答案：http://jsfiddle.net/megalomaniac/8j7otq0h/

<div id='app' v-cloak>
  <div v-for='foo in things'>
    <h3>{{ foo.title }}</h3>
    <div>
      <ul>
        <li v-for="bar in foo.bars" v-if="list[bar]">{{ list[bar].name }}</li>
        <!-- <li v-for="bar in foo.bars">Doesn't work: {{ list[bar].name }}</li> -->
      </ul>
    </div>
    <div v-html="foo.description"></div>
  </div>
</div>

<script>
var app = new Vue({
  el: '#app',
  data: {
    list: {
      "somekey":{"name":"Joe Bloggs","email":"joe.bloggs@"},
      "someotherkey":{"name":"John Doe","email":"john.doe@"},
      "anotherkey":{"name":"A N Other","email":"a.n.other@"}
    },
    things: [{"title":"Title01","bars":["somekey"],"description":"Desc01"},
      {"title":"Title02","bars":["someotherkey","anotherkey"],"description":"Desc02"},
      {"title":"Title03","bars":["somekey","brokenkey"],"description":"Desc03"},
      {"title":"Title03","bars":["somekey","anotherkey"],"description":"Desc03"}]
  }
})
</script>

基本上，我需要考虑某些数据可能损坏或丢失的实例（在JSFiddle中查找“断键”）。虽然这确实适用于异步问题，但不是因为异步，而是因为实际上缺少一些数据-这是我认为可以确定没有错的一件事（这将教会我思考只需检查返回的JSON的有效性，控制台中对象的存在，信任源等就可以了。

从v-for

2 个答案: