代码之家  ›  专栏  ›  技术社区  ›  Robert

组件模板中的Vujs迭代无效

  •  1
  • Robert  · 技术社区  · 6 年前

    <!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 回复  |  直到 6 年前
        1
  •  1
  •   Phil    6 年前

    问题是不能将重复的元素作为模板根。

    如果您使用Vue.js的开发版本,您将看到。。。

    [Vue warn]:编译模板时出错:

    将组件的模板更改为

    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>
        2
  •  2
  •   Tim Wickstrom    6 年前

    简单:

    “无法在有状态组件根元素上使用v-for,因为它呈现多个元素。”

    模板只能在根元素上使用,如果需要,可以将组件包装在DIV标记中,但在这个简单的例子中,我实际上认为第二个示例更优雅,并且符合该组件的单一责任原则。

    https://vuejs.org/v2/guide/components.html#A-Single-Root-Element