Why is Vue template v:for loop not working?

Question

Following a Vue tutorial, I ran into a problem. The code is same, but I can't display template using v:for loop. Here is my code

Vue.component('accordion', {
  template: `<p>Hello</p>`
});

new Vue({
  el: '#app',
  data: {
    items: [{
        title: 'Title 1',
        description: 'Description for tab 1.'
      },
      {
        title: 'Title 2',
        description: 'Description for tab 2.'
      },
      {
        title: 'Title 3',
        description: 'Description for tab 3.'
      },
    ]
  },
});

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue from Scratch</title>
  </head>
  <body>
    <div id="app">
      <accordion v:for="item in items"></accordion>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </body>
</html>

The template should be displayed three times (3x Hello), but I only get one Hello.

David Alvarez · Accepted Answer · 2020-06-18 11:03:22Z

2

You have a syntax problem with v-for. This is the correct syntax:

<ul id="example-1">
  <li v-for="item in items" :key="item.message">
    {{ item.message }}
  </li>
</ul>

answered Jun 18, 2020 at 11:03

David Alvarez

1,30613 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Why is Vue template v:for loop not working?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related