Vujs Итерации в компоненте шаблона не работает - PullRequest
Новая
       2

Vujs Итерации в компоненте шаблона не работает

1 голос
/ 10 мая 2019

Почему я не могу выполнить итерацию внутри шаблона компонента следующим образом? 

<!DOCTYPE html>
<html>
<head>
  <title>My first Vue app</title>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <style>
  </style>
</head>
<body>
    <div id="blog-post-demo">
      <blog-post :posts="posts"></blog-post>
    </div>
  <script>
    
Vue.component('blog-post', {
  props: ['posts'],
  template: `
    <div class="blog-post" v-for="post in posts">
      <h3> {{ post.title }}</h3>
      <button>Enlarge text</button>
      <div v-html="post.content"></div>
    </div>`,
})
new Vue({
  el   : '#blog-post-demo',
  data : {
    posts : [
      {id: 1, title : 'My Journey to Africa',    content : 'I am the post'},
      {id: 2, title : 'My Journey to America',   content : 'I am the post'},
      {id: 3, title : 'My Journey to Antartica', content : 'I am the post'},
      {id: 4, title : 'My Journey to Asia',      content : 'I am the post'},
    ],
  }
})
  </script>
</body>
</html>

Нижеследующее работает, но я не понимаю, почему вышеприведенное не работает. Любое объяснение поможет! 

<!DOCTYPE html>
<html>
<head>
  <title>My first Vue app</title>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
    <div id="blog-post-demo">
      <blog-post v-for="post in posts" :post="post"></blog-post>
    </div>
  <script>
    
Vue.component('blog-post', {
  props: ['post'],
  template: `
    <div class="blog-post">
      <h3> {{ post.title }}</h3>
      <button>Enlarge text</button>
      <div v-html="post.content"></div>
    </div>`,
})
new Vue({
  el   : '#blog-post-demo',
  data : {
    posts : [
      {id: 1, title : 'My Journey to Africa',    content : 'I am the post'},
      {id: 2, title : 'My Journey to America',   content : 'I am the post'},
      {id: 3, title : 'My Journey to Antartica', content : 'I am the post'},
      {id: 4, title : 'My Journey to Asia',      content : 'I am the post'},
    ],
  }
})
  </script>
</body>
</html>

Ответы [ 2 ]

2 голосов
/ 10 мая 2019

Simple:

"Невозможно использовать v-for для корневого элемента компонента с состоянием, поскольку он отображает несколько элементов."

Шаблон может иметь только корневой элемент, вы можете обернуть ваш компонент в тег DIV, если это необходимо, но в этом простом случае я на самом деле считаю, что ваш второй пример более элегантен и соответствует принципу единой ответственности для этого компонента.

Более подробную информацию можно найти в официальной документации VueJS: https://vuejs.org/v2/guide/components.html#A-Single-Root-Element

1 голос
/ 10 мая 2019

Проблема в том, что вы не можете иметь повторяющийся элемент в качестве корневого шаблона.

Если вы используете версию Vue.js для разработки, вы увидите ...

[Vue warn]: Ошибка компиляции шаблона:

Невозможно использовать v-for для корневого элемента компонента с состоянием, поскольку он отображает несколько элементов.

Измените шаблон вашего компонента на 

template: `<div><div v-for="post in posts" :key="post.id">...</div></div>`

Демо 

Vue.component('blog-post', {
  props: ['posts'],
  template: `<div>
    <div class="blog-post" v-for="post in posts" :key="post.id">
      <h3> {{ post.title }}</h3>
      <button>Enlarge text</button>
      <div v-html="post.content"></div>
    </div>
  </div>`,
})
new Vue({
  el   : '#blog-post-demo',
  data : {
    posts : [
      {id: 1, title : 'My Journey to Africa',    content : 'I am the post'},
      {id: 2, title : 'My Journey to America',   content : 'I am the post'},
      {id: 3, title : 'My Journey to Antartica', content : 'I am the post'},
      {id: 4, title : 'My Journey to Asia',      content : 'I am the post'},
    ],
  }
})
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.min.js"></script>
<div id="blog-post-demo">
  <blog-post :posts="posts"></blog-post>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...