v-for для массива, переданного как props, выдает ошибку
Я передаю массив объектов от родителя к ребенку и перебираю его с помощью 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

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, он также бросит ошибку.
Вот работает скрипка.

20.10.2019 11:46:08
v-for
не нужно двоеточие. Фактически, добавление двоеточия приведет к тому, что vue попытается оценить выражение, как если post
был свойством компонента, следовательно, другое сообщение об ошибке в консоли о post
используется, но не зарегистрирован как реактивное свойство.
Кроме того, есть и другие сообщения об ошибках в консоли об использовании v-for
в корневом элементе, которые вы не должны игнорировать. Вам нужно обернуть их в другой элемент или другой <template>
, так как компонент может состоять только из одного корневого элемента.