Question

Vue 组件无法读取属性

2019-08-27

237

javascript html vue.js

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

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

为什么他不识别“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 应该会就此发出警告）只需将其更改为

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