javascript - Vue.js 2 组件父子项未定义

Question

我是 vue 的新手，我收到错误 referenceError: items is not defined。任何人都可以看到为什么会发生这种情况或给我一些指示吗？

我认为这与第一次查看模板时未设置items有关。

我的代码:

<div id="root">
    <task-list></task-list>
    <template id="my-parent">
        <table>
            <thead>
                <tr>
                    <th>Name</th>
                    <th>id</th>
                </tr>
            </thead>
            <tbody>
                <tr is="task" v-for="item in items" :item="item"></tr>
            </tbody>
        </table>
    </template>

    <template id="my-child">
        <tr>
            <td></td>
            <td>{{ item.name }}</td>
            <td>{{ item.id }}</td>
        </tr>
    </template>

</div>
<script>



Vue.component('task-list', {
 template: '#my-parent',
 data: function() {
        return {
            items: []
        }
  },
  methods: {
    getMyData: function(val) {

        var _this = this;
        $.ajax({
            url: 'vuejson.php',
            method: 'GET',
            success: function (data) {
                console.log(data);
                _this.items = data;
            },
            error: function (error) {
                alert(JSON.stringify(error));
            }  
        })

     }
  },
  mounted: function () {
       this.getMyData("0");
    }
});

Vue.component('task', {

  template: '#my-child',
  props: ['item'],

    data: function() {
        return {
            item: {}
        }
    }
});
new Vue({
  el: "#root",

});

</script>

Answer 1

这里是工作修改后的代码:

<template id="my-child">
    <tr>
        <td>{{ item.name }}</td>
        <td>{{ item.id }}</td>
    </tr>
</template>
<template id="my-parent">
    <table>
        <thead>
            <tr>
                <th>Name</th>
                <th>id</th>
            </tr>
        </thead>
        <tbody>
            <tr is="task" v-for="item in items" :item="item"></tr>
        </tbody>
    </table>
</template>
<div id="root">
    <task-list></task-list>
</div>

和js:

Vue.component('task-list', {
  template: '#my-parent',
  data: function() {
    return {
        items: []
    }
},
methods: {
getMyData: function(val) {

    var _this = this;
    _this.items = [{name: '1.name', id: 1}];
 }
 },
 mounted: function () {
   this.getMyData("0");
}
});

Vue.component('task', {

template: '#my-child',
props: ['item'],

data: function() {
    return {
    }
}
});
new Vue({
el: "#root",

});

jsfiddle

如果你先做一些教程，那么使用 vue 会容易得多:)

编辑:还有一件事:如果您声明属性(在您的情况下为项目)，请不要在数据中使用该名称。所以，我做了什么:- 将模板放置在根元素之外- 从数据中删除“项目”