#javascript #vue.js #nuxt.js
Вопрос:
Я получаю эту ошибку только при попытке распечатать id
первый вопрос questions
массива. (Я получаю значение, также эта ошибка отображается в консоли )
<p> {{ questions[0].id }} </p>
Но когда я пытаюсь зациклить вопросы,ошибки нет.
<p v-for="i in questions" :key="i.id">
{{ i.id }}
</p>
Раздел сценария шаблона
<script>
export default {
data() {
return {
questions: []
}
},
mounted(){
axios.get('/get_questions')
.then((res) => {
this.questions = res.data
});
}
}
</script>
Ответ №1:
Потому что, когда страница только что загружена, questions
это пустой массив.
Когда вы пытаетесь зациклить пустой массив, тело цикла просто не запускается:
for(let i of []) {
// this part will not reach
}
Но когда вы пытаетесь получить параметр из первого элемента(который есть undefined
) пустого массива, он выдаст вам ошибку.
[][0].id // can't read ".id" from undefined
Что вы можете сделать, так это убедиться questions
, что в нем есть содержимое:
<p v-if="questions.length > 0"> {{ questions[0].id }} </p>
Ответ №2:
Это происходит из-за того, что ваш индекс доступа [0] при вашей интерполяции из первых рук еще до того, как axios завершит выполнение, требует, следовательно, ошибки.
Это небезопасно и, безусловно, приведет к ошибкам. что вы можете сделать, так это добавить некоторые условия при интерполяции
{{ questions.length > 0 ? questions[0].id: '' }}