如何解决：[Vue 警告]：在 vue.js 2 上渲染组件时出错？

Posted 2023-02-23

【中文标题】如何解决：[Vue 警告]：在 vue.js 2 上渲染组件时出错？

【英文标题】：How to solve : [Vue warn]: Error when rendering component on the vue.js 2?

【发布时间】：2017-06-18 04:47:00

【问题描述】：

我的组件代码（SearchResultView.vue）是这样的：

<template>
    ...
</template>

<script>

    export default
        props:['search','category','shop'],
        created()
            ...
        ,
        data()
            return
                loading:false
            
        ,
        computed:
            list:function()
                var a = this.$store.state.product;
                a = JSON.stringify(a)
                a = JSON.parse(a)
                console.log(a.list[12])
                ...
            
        ,
        methods:
            ...
        
    
</script>

当我在控制台上检查这个：console.log(a.list[12])，结果：

我要显示名称的值

我尝试这样：

console.log(a.list[12].name)

在控制台上，存在这样的错误：

[Vue 警告]：在 C:\xampp\htdocs\chelseashop\resources\assets\js\components\SearchResultView.vue 渲染组件时出错：

未捕获的类型错误：无法读取未定义的属性“名称”

我该如何解决这个错误？

【问题讨论】：

由于这是一个渲染问题，您需要将您使用的模板提供给我们。很可能您在加载数据之前访问数据或传递错误属性

console.log(JSON.stringify(a.list[12]))的回复是什么？

@Saurabh, "id":12,"name":"Bunga Gandeng","photo":"bunga6.jpg","price":762913,"stock":36,"total_sold":54,"total_view":0,"weight":68,"store_id":1,"shop_name":"Bunga Airi","formatted_address":"Kemang"

正如@FrankProvost 所说，请添加您的模板，这似乎是问题所在，而且我想在您的list 函数结束时您正在返回一个值，但请您添加整个函数的主体？

尝试将console.log(a.list[12]) 分配给这样的变量：var z=console.log(a.list[12])，然后使用z.name 并告诉我之后的输出。

【参考方案1】：

因为它是一个计算值，所以它的值可能会在程序的生命周期内发生变化。在尝试从中获取成员之前，您应该检查以确保 a.list[12] 存在。

if (a.list[12])
    console.log(a.list[12].name);