v-for для массива, переданного как props, выдает ошибку

v-for для массива, переданного как props, выдает ошибку

20.10.2019 11:27:45 Просмотров 54 Источник

Я передаю массив объектов от родителя к ребенку и перебираю его с помощью v-for. Он бросает "TypeError: не удается прочитать свойство "title" неопределенного"

У меня есть postsList как родитель и Post как ребенок.

Ссылка для codesandbox: https://codesandbox.io/s/vue-template-hh0hi

Как заставить это работать?


// Parent 
<template>
  <div class="hello">
    <Post :posts="posts"/>
  </div>
</template>

<script>
import Post from './Post'

export default {
  name: "PostsList",
  data: () => {
    return {
      posts: [
        { title: 'one', description: 'desc one'},
        { title: 'two', description: 'desc two'}
      ]
    }
  },
  components: {
    Post
  },
  props: {
    msg: String
  }
};
</script>


Child

<template>
  <div :v-for="post in posts" class="hello">
    {{post.title}}
  </div>
</template>

<script>
export default {
  name: "Post",
 props: {
    title: { type: String, default: 'asdff' },
    posts: {
      type: Array,
      default: () => []
    }
  }
};
</script>
У вопроса есть решение - Посмотреть?

Ответы - v-for для массива, переданного как props, выдает ошибку / v-for for array passed as props throws error

Является ответом!
N. Djokic

20.10.2019 11:39:35

Вам нужно обернуть свой компонент Post в один div, как это:

<template>
   <div>
      <div v-for="post in posts" class="hello">
         {{post.title}}
      </div>
   </div>
</template>

Шаблон должен содержать только один корневой элемент.

Также вам не нужно : перед v-for, он также бросит ошибку.

Вот работает скрипка.

Constantin Groß

20.10.2019 11:46:08

v-for не нужно двоеточие. Фактически, добавление двоеточия приведет к тому, что vue попытается оценить выражение, как если postбыл свойством компонента, следовательно, другое сообщение об ошибке в консоли о postиспользуется, но не зарегистрирован как реактивное свойство.

Кроме того, есть и другие сообщения об ошибках в консоли об использовании v-forв корневом элементе, которые вы не должны игнорировать. Вам нужно обернуть их в другой элемент или другой <template>, так как компонент может состоять только из одного корневого элемента.

Закрыть X