Импортируйте объект JSON в VueJS и добавляйте в него новые элементы

В VueJS я импортирую некоторые JSON с сервера.
После этого я отображаю данные с помощью директивы v-for.

Дело в том, что позже я хочу добавить дополнительные данные к этому объекту JSON.

Это пример генератора данных объекта на PHP:

{
"Height": {
"description": "Height of product in centimeters.",
"values": {
"1": {
"value": "20cm",
"extra": ""},
"2": {
"value": "60cm",
"extra": ""}
}
}
}

Это мой экземпляр VueJS:

new Vue({
el: '#attributes_list',
data: {
attributes: {!! $attributes_json !!}
},

methods: {
addAttribute : function(attr) {
this.attributes[attr].values.new = {value: 'test', extra: 'test2'};
}

}
})

И кнопка с событием:

<button @click.prevent="addAttribute('Height')">Add</button>

Я уже знаю, что это не работает, потому что значения не находятся в массиве, поэтому я не могу вставить в него новые данные. Но как мне добавить новые данные в этот объект?

На стороне сервера я не могу изменить формат выпуска данных.
Спасибо!

1

Решение

Вы должны использовать $set метод vue,

this.$set('attributes.' + attr + '.values.new', {value: 'test', extra: 'test2'})

http://jsfiddle.net/f7pdf9nx/

2

Другие решения

Других решений пока нет …

По вопросам рекламы [email protected]