Компонент v для не распознает свойство, если оно не объявлено явно при инициализации объекта в корне

В моем корне я объявляю свой (многомерный) объект в данных следующим образом:

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

Если я отправлю реквизит следующим образом:

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

Также в компоненте accept props. В компоненте у меня также есть шаблон, по которому я выполняю цикл 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 был там.

Заливаю аккаунты методом в корне, привязанным к чекбоксу @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];
        }
    },
 }

javascript vue.js vuejs2 vue-component v-for
person senty    schedule 02.08.2017    source источник
comment
Если вы динамически добавляете свойство к объекту, Vue не сможет обнаружить, что оно было добавлено, и оно не будет реактивным. Вам нужно добавить его, используя $set. vuejs.org/v2/guide/reactivity.html#Change-Detection- Предостережения   -  person Bert    schedule 03.08.2017
comment
Как я могу использовать $set с вложенными объектами, подобными этому? Не могли бы вы показать пример. Нужно ли объявлять методы отправки и удаления объекта?   -  person senty    schedule 03.08.2017
comment
Где/когда вы добавляете в аккаунты?   -  person Bert    schedule 03.08.2017
comment
Используя @change="accountSelected" для флажков, я использую метод pushValue, который я добавил в вопрос   -  person senty    schedule 03.08.2017

Ответы (1)


arrow_upward
2
arrow_downward

Как упоминалось в моем комментарии выше, 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]);
    }
},

Ошибка, которую вы видите в отношении 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>
person Bert    schedule 02.08.2017
comment
Это сработало, однако я получил ту же ошибку «Избегайте использования непримитивного значения в качестве ключа, вместо этого используйте строковое/числовое значение». - person senty; 03.08.2017
comment
@senty, где ты используешь ключ? - person Bert; 03.08.2017