Vue2 子组件对象 v-for 列表渲染的奇怪问题 [英] Strange issue with Vue2 child component object v-for list render

问题描述

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

 数据(){返回 {产品: []，属性: {}，}},

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

 安装(){axios.get('/requests/getProducts/' + this.currentCategory).then(response => {this.products = response.data;this.createAttributes();//运行一些方法来填充属性对象});},

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

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

我在我的子组件中声明了道具:

 道具:['属性']，

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

问题是当我尝试 v-for 子组件中的属性时，它只是不返回任何内容:

///////////////这不会渲染任何东西///////////////<模板><div><div v-for="(value, key) in attributes">{{ 钥匙 }}

</模板>

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

///////////////这有效//////////////<模板><div><div v-for="(value, key) in attributes">{{ 钥匙 }}

{{ 产品 }}

</模板>

这到底是怎么回事?

你需要查看我的父方法吗?

解决方案

我希望你会遇到更改检测警告.Vue 无法检测您何时向对象动态添加属性.在这种情况下，您从一个空的 attributes 对象开始.如果在不使用 $set 的情况下向其添加属性，则 Vue 不会理解发生了更改并且不会更新 DOM.

更新 createAttributes 以使用 $set.

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

I have a parent component that contains an array and an object:

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

When my parent component is loaded, it gets some AJAX data and populates the variables:

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

I then have a child component that I will use to display the attributes. Code from parent template:

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

I have the props declared in my child component:

    props: ['attributes'],

So far so good, I can console log the data from parent and child...

Problem is when I try to v-for the attributes in the child component, it simply returns nothing:

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

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

However, if I pass both the products and attributes variables to the child component, and render products in the child component, attributes will start working!

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

What the heck is going on?

Do you need to see my parent methods?

解决方案

I expect you are running into a change detection caveat. Vue cannot detect when you add properties dynamically to an object. In this case, you begin with an empty attributes object. If you add properties to it without using $set, then Vue does not understand a change has occurred and will not update the DOM.

Update the createAttributes to use $set.

The reason it works when you pass products is Vue can detect the change you make (this.products = response.data), so it renders the DOM, which shows the latest attributes as a by product.

这篇关于Vue2 子组件对象 v-for 列表渲染的奇怪问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！