Question

按下按钮将请求发送到服务器
服务器发送一个json数组作为响应。
我想使用v-for和component在屏幕上显示数据
我很好地获取了数据，但是当我在屏幕上显示数据时，我得到了一个错误。

错误：属性或方法“数据”未在实例上定义，但在渲染期间被引用。通过初始化属性，确保该属性在data选项中或对于基于类的组件都是反应性的。

他为什么不识别“数据”？

html

<template id="dataTemplate">
    <div>
        <p v-for="data in dataList">
            <h3><a :href="data.href">{{ data.title }}></a></h3>
            <p>Date : {{ data.propose_dt }}</p>
        </p>
    </div>
</template>

<script type="text/javascript">
    Vue.component('data-template', {
        template: '#dataTemplate',
        props: ['dataList']
    })
</script>
<body>
    <div id="app">
        <data-template :dataList="dataDetail" v-if="dataDetail.length != 0"></data-template>
    </div>
</body>

vue javascript

let app = new Vue({
    el: "#app",
    data: {
        dataDetail: []
    },
    methods: {
        getData: function() {
            this.searching = true;
            axios.get(url)
            .then(res => {
                this.dataDetail = json array data;
                console.log(this.dataDetil);  //'dataDetail' have right value after server request
            });
        }
    }
})

Answer 1

这是因为您使用p标记而不是div（如果使用ide，那么ide hold会警告您）只需将其更改为

<div v-for="data in dataList">
     <h3><a :href="data.href">{{ data.title }}></a></h3>
     <p>Date : {{ data.propose_dt }}</p>
</div>

Vue组件无法读取属性

1 个答案: