Как отобразить свойство объекта, вложенного в массив внутри атрибута шаблона?

Question

Я получаю сообщение об ошибке:

Ошибка типа: "someArr [0] не определено" .

При попытке доступа к объектусвойство внутри шаблона:

<th v-bind:data-id="someArr[0].id">{{someArr[0].name}}</th>

Несмотря на ошибку, отображаются данные.

Исходные данные для someArr:

Array[0]: Object {id: "1", name: "One"}
Array[1]: Object {id: "2", name: "Two"}

Возможно ли получить значениенапрямую без использования цикла?

EDIT

Я вызываю внутри блока созданного () этот метод fetchData (), который через Ajax извлекает данные и заполняет модель. Сейчас я проверю ваше предположение, но почему тогда отображаются данные?

Answer 1

Добро пожаловать в сообщество StackOverflow!

Когда вы используете какое-либо значение внутри vue data property, Vue отслеживает его значение, которое является всей целью фреймворка. Теперь значение связано с реактивностью, и вы связали это значение с пользовательским интерфейсом, поэтому при каждом изменении этого значения Vue отслеживает его и повторно отображает тот модуль, который связан со значением и отражает обновленное значение.

В вашем случаеясно, что существует свойство Ex -

data() {
  return {
    someArr: []
  }
},
created() {
 // Await api call
 this.someArr = response
}

Теперь для первого рендера ваше значение равно empty arr, которое обновляется после выполнения асинхронного запроса и обновления этого значения. Но очевидно, что будет выполняться синхронный код, который выдаст ошибку, что someArr[0] is undefined в качестве значения пусто.

В таком случае всегда предпочтительнее проверять, существует ли значение.

<th v-if="someArr.length" v-bind:data-id="someArr[0].id">{{someArr[0].name}}</th>

Сейчас JSДвижок не будет выполнять или искать someArr[0].id, если массив пуст, после того, как вы извлекли обновленные данные, Vue выполнит повторный рендеринг, и на этот раз он будет искать id, поскольку массив имеет какое-то значение