vue.js - Vue2 子组件对象 v-for 列表渲染的奇怪问题

Question

我有一个包含数组和对象的父组件:

    data() {
        return {
            products: [],
            attributes: {},
        }
    },

当我的父组件加载时，它获取一些 AJAX 数据并填充变量:

    mounted() {
        axios.get('/requests/getProducts/' + this.currentCategory).then(response => {
            this.products = response.data;
            this.createAttributes(); // runs some methods to populate the attributes object
        });
    }, 

然后我有一个子组件，我将使用它来显示属性。来自父模板的代码:

    <search-attributes :attributes="attributes"></search-attributes>

我在我的子组件中声明了 Prop :

    props: ['attributes'],

到目前为止一切顺利，我可以控制台记录来自 parent 和 child 的数据......

问题是当我尝试 v-for 子组件中的属性时，它什么都不返回:

/////////////// this does not render anything ///////////////

<template>
    <div>
        <div v-for="(value, key) in attributes">
            {{ key }}
        </div>
    </div>
</template>

但是，如果我将产品和属性变量都传递给子组件，并在子组件中呈现产品，属性将开始工作!

/////////////// this works /////////////
<template>
    <div>
        <div v-for="(value, key) in attributes">
            {{ key }}
        </div>
    {{ products }}
    </div>
</template>

这到底是怎么回事？

您需要查看我的父方法吗？

Answer 1

我预计你会遇到 change detection caveat . Vue 无法检测到何时向对象动态添加属性。在这种情况下，您从一个空的 attributes 对象开始。如果你在不使用 $set 的情况下向它添加属性，那么 Vue 不会理解发生了更改，也不会更新 DOM。

更新 createAttributes 以使用 $set .

当您传递 products 时它起作用的原因是 Vue 可以检测您所做的更改 (this.products = response.data)，所以它呈现 DOM，显示最新的 attributes 作为副产品。