В 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>
Я уже знаю, что это не работает, потому что значения не находятся в массиве, поэтому я не могу вставить в него новые данные. Но как мне добавить новые данные в этот объект?
На стороне сервера я не могу изменить формат выпуска данных.
Спасибо!
Вы должны использовать $set
метод vue,
this.$set('attributes.' + attr + '.values.new', {value: 'test', extra: 'test2'})
Других решений пока нет …