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

标签 javascript vue.js vuejs2 vue-component

我是 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>

最佳答案

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

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

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

关于javascript - Vue.js 2 组件父子项未定义,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43490336/

相关文章:

javascript - 如何跳转到JavaScript库源?

javascript - AngularJS 多种表单 - 如何按名称提交表单?

javascript - 尝试使用 axios 和 formData 发布数据,但它是空的

javascript - 如何使用ref获取所有列表项?

javascript - 我可以在 Vuex 的 settimeout 函数中更改并提交状态吗?

javascript - 如何根据 v-for 循环中的数据属性对元素进行分组?

javascript - 无法使用 Node.js 批量插入到 mysql

javascript - 在 RegEx (JavaScript) 中正确转义变量

vue.js - 使元素仅对md大小的设备可见

javascript - Vue JS - vue-class-component 绑定(bind)输入