v-for для массива, переданного как ошибка броска реквизита - PullRequest
Новая
       11

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

4 голосов
/ 20 октября 2019

Я передаю массив объектов от родителя к потомку и перебираю его, используя v-for. Он выдает «Ошибка типа: Не удается прочитать свойство '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>

Ответы [ 2 ]

4 голосов
/ 20 октября 2019

Вам нужно заключить компонент Post в один элемент div следующим образом: 

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

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

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

ЗДЕСЬ работает скрипкой.

2 голосов
/ 20 октября 2019

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

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

...