CODEWITHSUNDEEP
javascriptvue.js
Doug Smith
Doug Smith

Reputation: 580

vue.js getting started not working

I'm trying out vue.js for the first time, and a beginner javascript programmer. I'm going through the vue.js getting started page

My html code is:

<!DOCTYPE html>
<html>
    <head>
      <meta charset="utf-8">
      <title>React Tutorial</title>
      <script src="bower_components/vue/dist/vue.js"></script>
      <script src="js/myVue.js"></script>
    </head>
    <body>
        <div id="demo">
            <h1>&#123;&#123;title | uppercase&#125;&#125;</h1>
            <ul>
                <li
                    v-for="todos"
                    v-on="click: done = !done"
                    class="&#123;&#123;done ? 'done' : ''&#125;&#125;">
                    &#123;&#123;content&#125;&#125;
                </li>
            </ul>
        </div>
    </body>
</html>

and myVue.js file is

window.onload = function () {
    var demo = new Vue({
        el: '#demo',
        data: {
            title: 'todos',
            todos: [
                {
                    done: true,
                    content: 'Learn JavaScript'
                },
                {
                    done: false,
                    content: 'Learn Vue.js'
                }
            ]
        }
    });
}

The Getting started code is old because v-repeat has beeen depreciated and replaced with v-for. When I use v-for I get the warning "alias is required in v-for". I also get an uncaught typeError "cannot read property "create" of undefined.

The JSFiddle code does not work either.

Upvotes: 0

Views: 1409

Answers (1)

Jeff
Jeff

Reputation: 25221

v-for requires alias means you have to name the variable in your for loop, like so:

<li
    v-for="todo in todos"
    @click="todo.done = !todo.done"
    v-bind:class="{'done' : todo.done}">
    {{todo.content}}
</li>

Upvotes: 1

Related Questions