无法在 Vue.js 中设置未定义的属性“产品”[重复]

Posted 2023-02-22

【中文标题】无法在 Vue.js 中设置未定义的属性“产品”[重复]

【英文标题】：Cannot set property 'products' of undefined in Vue.js [duplicate]

【发布时间】：2020-09-14 00:06:35

【问题描述】：

我正在尝试将另一个 JS 文件中的对象数组导入 Vue 组件，并让它根据对象的属性呈现卡片。导入正在工作，因为我已将其记录在控制台中并返回了数组，但是当我尝试将其分配给已经存在的数组时，它会抛出 TypeError: Cannot set property 'products' of undefined。此外，console.log(this.products) 不返回任何内容，但也不会引发错误。下面是我的 Products.vue 组件

<template>
<div>
    <header>
        <h1> Products </h1>
        <br>
        <h3> Browse All Our Products </h3>
    </header>
    <section>
        <div v-for='item in products' v-bind:key='item.name' class="product">
            <h3> item.name </h3>
            <div>
            <img :src="item.img" />
            </div>
            <p> item.desc </p>
            <p> item.modelNum </p>
        </div>
    </section>
</div>
</template>

<style scoped src='../assets/products.css'></style>

<script>
    import  productList  from '../assets/db.js';

    export default 
    name: 'Products',
    data: function() 
        return 
            products: [],
            importList: productList,
        ;
    ,
    created: () => 
        this.products = productList;
        //console.log(products);
    

</script>

【参考方案1】：

好的，首先您已将所有导入的产品分配给importList 变量。 所以在created()方法中你可以写成this.products = this.importList，我认为这应该可以解决你的问题。试试看！

【参考方案2】：

应该修改你的代码：

created: () => 

created () 

【参考方案3】：

不要使用箭头函数，改成这样：

created: function() 
        this.products = productList;
        //console.log(products);
    

Vue 将绑定this 在数据、方法、安装、计算...

【讨论】：

谢谢你，这工作得很好。你能解释一下，因为它基本上是简写，对我来说没有意义

@JacobBruce Use arrow function in vue computed does not work