个人中心
gpt4 book ai didi

javascript - Vue 组件无法读取属性

转载 作者：行者123 更新时间：2023-11-30 19:19:09 25 4
gpt4 key购买 nike

  1. 按下按钮向服务器发送请求
  2. 服务器发送一个 json 数组作为响应。
  3. 我想使用 v-for 和组件在屏幕上显示数据
  4. 我很好地获取了数据，但是当我将其显示在屏幕上时，出现错误。

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

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

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
            });
        }
    }
})

最佳答案

这是因为你使用 p 标签而不是 div (如果你使用 ide，ide sholud 会警告你)只需将其更改为

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

关于javascript - Vue 组件无法读取属性，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57669864/

25 4 0
文章推荐： javascript - '[object 对象],[object 对象 ]' for pipe ' AsyncPipe'
文章推荐： c - c 中的 mpi 中未发生消息传递
文章推荐： c - 我的动态数组有问题
文章推荐： c - 查看链接列表的项目
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com