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>

我的子组件中声明了道具：

    props: ['attributes'],

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

问题是当我尝试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 为产品。