如果在根目录中初始化对象时未显式声明，则组件 v for 无法识别 prop

Question

在我的根中，我在数据中声明我的（多维）对象，如下所示：

var app = new Vue({
    el: '#root',
    data: {
       accounts: {}
}

如果我这样发送道具：

<div id="root">
   <my-component :accounts="accounts"></my-component>
</div>

同样在组件中，接受道具。在组件中，我还有执行 for 循环的模板。

Vue.component('my-component', {
   props: ['accounts'],
   template `
       <div>
        <another-component v-for="(x, i) in accounts"></another-component>
       </div>
   `
})

在这种情况下，当我在根目录中初始化帐户时，如果我给它一个空对象，它就不会执行循环。

如果在 for 循环中，我使用数字而不是帐户，它会执行循环。

此外，在根目录中初始化时，如果我变得明确...

accountTypes : {
     1: [],
     2: []
},

...for 循环有效。然而，这次我得到另一个错误：

Avoid using non-primitive value as key, use string/number value instead.

此外，我不想明确说明 1 和 2，有时我根本不想让 2 出现。

我正在用根目录中的方法填充帐户，绑定到复选框 @change。

 methods: {
   accountSelected() {
       this.pushValue(index, name)
   },

   pushValue(key, value) {
        var obj = this.accounts

        if (obj.hasOwnProperty(key)) {
            var idx = $.inArray(value, obj[key]);
            if (idx == -1) {
                obj[key].push(value);
            }
        } else {
            obj[key] = [value];
        }
    },
 }

Answer 1

正如我在上面的评论中提到的，Vue cannot detect when you add properties to an object after that object has been added to the Vue. Use $set 在您的 else 条款中。

pushValue(key, value) {
    var obj = this.accountTypes

    if (obj.hasOwnProperty(key)) {
        var idx = $.inArray(value, obj[key]);
        if (idx == -1) {
            obj[key].push(value);
        }
    } else {
        this.$set(obj, key, [value]);
    }
},

您看到的关于 key 的错误可能是因为您在循环期间设置了 key:

<another-component v-for="(x, i) in accounts" :key="x"></another-component>

这里的问题是 x 是一个数组。 i，然而只是 accounts 的关键，所以使用它。

<another-component v-for="(x, i) in accounts" :key="i"></another-component>

如果在根目录中初始化对象时未显式声明，则组件 v for 无法识别 prop

Component v for doesn't recognise prop, if not explicitly declared while initializing object in root

javascript

vue.js

vue-component

vuejs2

v-for