时间戳

首页 > 解决方案 > 从 v-for 内部访问多维对象

javascript - 从 v-for 内部访问多维对象

问题描述

我可能正在做一些密集的事情，但是现在我已经用头撞了一段时间，我想我会在这里问是否有其他人可以看到我哪里出错了。

所以，这有点简化，但基本上我正在使用 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>

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

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

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

我明白了

这又是我所期望的。所以所有的对象数据都在那里并且可以访问（并且似乎可以通过控制台和 Vue DevTools 插件），只是在 v-for 中使用list[bar].name（或list[bar][name],list[bar].email等）时不行，这有点挠头。

有任何想法吗？

谢谢！

标签： javascriptarraysvue.jsjavascript-objects

解决方案

所以，感谢@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 中查找“brokenkey”）。虽然这确实适用于我的情况下的异步问题，但这并不是因为异步，而是因为某些数据实际上丢失了——这是我认为我可以确定没有错的一件事（这会教我思考测试返回的 JSON 的有效性、控制台中对象的存在、信任源等足以进行检查）。

推荐阅读