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 会容易得多:)

编辑：还有一件事：如果您声明属性（在您的案例中为项目），请不要在数据中使用该名称。所以，我做了什么： - 将模板放置在根元素之外 - 从数据

中删除了 "item"

Answer 2

您应该在 div#root 之外描述模板。例子

<div id="root">
    <task-list></task-list>
</div>
 <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>

因为如果它们在#root 中，它们就是它的 vue 实例的一部分，并且其中没有 items。

new Vue({
  el: "#root",
  //no items
});

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

Vue.js 2 components parent child item not defined

javascript

vue.js

vue-component

vuejs2