отображение свойства асинхронных данных в vuejs3

У меня есть следующий пример кода, если я использую:

 <p>{{usr[0]}}</p>

работает, но если я обращаюсь к заголовку, я получаю «unncaught TypeError: Cannot read property 'title' of undefined»:

 <p>{{usr[0].title}}</p>

ncaught TypeError: невозможно прочитать свойство 'title' неопределенного

образец кода

как правильно вести себя в этом случае? Благодарность


vue.js vuejs3 vue-component
person sqllyw    schedule 10.11.2020    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Самый быстрый способ - использовать v-if, чтобы определить, нужно ли выполнять рендеринг содержимого.

<p v-if="usr[0]">{{usr[0].title}}</p>


const TodoList = {
  data() {
    return {
      usr: []
    }
  },
  async mounted() {
    const response = await fetch('https://jsonplaceholder.typicode.com/todos');
    let rslt = await response.json();
    this.usr = rslt
  }
}
const app = Vue.createApp(TodoList)
app.mount('#myapp')
<script src="https://unpkg.com/vue@next"></script>
<!-- page content -->
<div id="myapp">
  <p v-if="usr[0]">{{usr[0].title}}</p>
</div>

Вы также можете использовать другую переменную, чтобы отслеживать, готов ли контент.

person Daniel    schedule 10.11.2020

arrow_upward
1
arrow_downward

Первоначально ваш массив пуст, и в элементе с индексом 0 вашего массива нет свойства с именем title, поэтому вы можете добавить условный рендеринг, например:

 <p>{{usr.length && usr[0].title}}</p>
person Boussadjra Brahim    schedule 10.11.2020