Question

vue.js 开始不工作

2016-01-22

1397

javascript vue.js

我是初学 JavaScript 程序员，第一次尝试使用 vue.js。我正在浏览 vue.js 入门页面

我的 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“无法读取未定义的属性“create”。

JSFiddle 代码也不起作用。

Answer 1

v-for 需要别名 意味着您必须在 for 循环中命名变量，如下所示：

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