HTMLVue.js Как добавить новое свойство в объект повторного массива?
<div v-repeat=dudes>{{a}}, {{b}}</div>
JS
dudes = [{a:1}, {a:2}, {a:3}]
new Vue({
el: 'body',
data: {dudes: dudes}
})
dudes[0].b = 'test'
Попытка установить dudes[0].b = 'test' не работает.
http://jsbin.com/dogadutiqa/1/edit
Если не определить чуваков с b собственности, чтобы начать с dudes = [{a:1, b:null}, {a:2}, {a:3}]
Как добавить новые свойства?
Из-за ограничений ES5 Vue не может обнаруживать свойства, непосредственно добавленные или удаленные из объекта.
Чтобы объявить свойство, вам необходимо использовать метод $add, чтобы его можно было наблюдать. Также, если вы хотите удалить свойство, вам нужен метод $delete.
Для последней версии Vue (2.2.0 на момент этого ответа) это то, что вы должны сделать:
Вместо dudes[0].b = 'test' просто сделать:
Vue.set(dudes[0],'b','test');
внутри метода, или :
$set(dudes[0],'b','test')
внутри шаблона вида (как в @click="$set(dudes[0],'b','test')")
У меня есть массив объектов, а не строк. Таким образом, ваш примерный код на самом деле не имеет смысла. Кроме того, вы ошибаетесь, потому что, если я делаю «dudes [0] .a =« test », это работает. (изменение 'a' вместо' b') –
@StephenBugsKamenar Ну, я только заметил, что я неправильно понял ваш вопрос. 'a' - это существующая proerty, а' b' - нет. Вам нужно '$ add' сначала объявить ключ свойства, чтобы его можно было наблюдать. Также вызывается '$ delete', если вы хотите удалить свойство. – Leo
Я не знаю, как я пропустил это в документах. Имеет смысл, спасибо! –