Question

我是第一次尝试vue.js，还有一个初学的javascript程序员。我正在浏览vue.js getting started page

我的HTML代码是：

<!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>

和myVue.js文件是

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

入门代码很旧，因为v-repeat已被折旧并替换为v-for。当我使用v-for时，我收到警告“v-for中需要别名”。我也得到一个未被捕获的typeError“无法读取属性”创建“undefined。

JSFiddle代码也不起作用。

Answer 1

v-for requires alias表示你必须在for循环中命名变量，如下所示：

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

vue.js开始不起作用

1 个答案: