0

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

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 循环有效。但是，这一次我得到另一个错误：

避免使用非原始值作为键，而是使用字符串/数字值。

另外，我不想明确说明 1 和 2，有时我根本不希望 2 出现。

我正在用我的根目录中的一个方法填充帐户，绑定到 checkbox @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];
        }
    },
 }
4

1 回答 1

2

正如我在上面的评论中提到的，在将对象添加到 Vue 之后， Vue 无法检测到您何时向该对象添加属性。在您的子句中使用$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]);
    }
},

您看到的关于 a 的错误可能是因为您在循环期间key设置了 a ：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>
于 2017-08-02T23:59:24.843 回答