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

Question

我正在尝试将另一个 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>

Answer 1

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

Answer 2

应该修改你的代码：

created: () => {
}

created () {
}

Answer 3

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

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

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