CODEWITHSUNDEEP
vue.js
George Florian
George Florian

Reputation: 15

Simplest v-for example doesn't work in <li v-for="todo in todos">

I've started learning Vue.js and I immediately hit a bump.

<body>
    <div id="app">
        <span v-if='show'>{{ message }}</span>
    </div>
    <ol>
        <li v-for="todo in todos">
            {{ todo }}
        </li>
    </ol>
</body>

var app = new Vue({
    el: '#app', // elementul pe care il controleaza Vue
    data: { // datele aplicatiei (model)
        message: "Hello Vue",
        show: true,
        todos: [
            "Learn JavaScript",
            "Learn Vue.JS",
            "Learn React",
            "Be Free !"
        ]
    }
});

Using the above code should display :

Hello Vue
1.Learn JavaScript
2.Learn Vue.JS
3.Learn React
4.Be Free !

Instead this is what I get:

Hello Vue
1.{{ todo }}

I am watching a video tutorial and my code is identical to the teacher's; his works, mine does not.
The console is empty. There is no error, no warning message, no nothing. It just does not work.

I have also tried using {{ todo.text }} but with no luck.

Upvotes: 0

Views: 208

Answers (1)

Decade Moon
Decade Moon

Reputation: 34306

Your list is outside of the main div element, so it won't be part of the component's template.

Fix is:

<body>
    <div id="app">
       <span v-if='show'>{{ message }}</span>
       <ol>
           <li v-for="todo in todos">
               {{ todo }}
           </li>
       </ol>
    </div>
</body>

Upvotes: 1

Related Questions