Доступ к многомерному объекту изнутри v-for

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 warn]: Ошибка при рендеринге: «TypeError: Невозможно прочитать свойство 'name' из undefined" TypeError: Невозможно прочитать свойство 'name' из undefined

Однако, если я использую:

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

Я не получаю ошибок, и выводится следующее:

• {"name": "Joe Bloggs", "email": "joe.bloggs @"}
• {"имя": "Джон Доу", "электронная почта": "john.doe @"}
• и т. д.

Как я и ожидал.Аналогично, если я использую:

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

, я получаю

• {"name": "AN Other", "email": "another @"}

Опять же, это как я и ожидал.Таким образом, все данные объекта есть и доступны (и, кажется, все в порядке через консоль и надстройку Vue DevTools), но только при использовании list[bar].name (или list[bar][name], list[bar].email и т. Д.) Вv-for, это что-то вроде головного скребка.

Есть идеи?

Спасибо!

Answer 1

Итак, благодаря предложению @ 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, наличие объектов в консоли, доверие к источнику и т. д. - достаточно проверки).

Answer 2

Как указано в комментарии OP, свойство данных = список создается или обновляется async с помощью 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>