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，显示最新的{{ 1}}作为副产品。

Vue2子组件对象v-for list渲染的奇怪问题

1 个答案: