Я новичок в Vuejs. Что-то сделал, но не знаю, как это просто / правильно.
что я хочу
Я хочу несколько дат в массиве и обновляю их по событию. Сначала попробовал Vue.set, но ничего не вышло. Теперь после изменения элемента моего массива:
this.items[index] = val;
this.items.push();
Я ничего не нажимаю () в массив, и он обновляется .. Но иногда последний элемент каким-то образом скрывается ... Я думаю, что это решение немного взломано, как я могу сделать его стабильным?
Вот простой код:
new Vue({
el: '#app',
data: {
f: 'DD-MM-YYYY',
items: [
"10-03-2017",
"12-03-2017"
]
},
methods: {
cha: function(index, item, what, count) {
console.log(item + " index > " + index);
val = moment(this.items[index], this.f).add(count, what).format(this.f);
this.items[index] = val;
this.items.push();
console.log("arr length: " + this.items.length);
}
}
})
ul {
list-style-type: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.11/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<div id="app">
<ul>
<li v-for="(index, item) in items">
<br><br>
<button v-on:click="cha(index, item, 'day', -1)">
- day</button>
{{ item }}
<button v-on:click="cha(index, item, 'day', 1)">
+ day</button>
<br><br>
</li>
</ul>
</div>
источник
РЕДАКТИРОВАТЬ 2
Vue.set(object, prop, value)
ИЗМЕНИТЬ 1
Для vuex вы захотите сделать
Vue.set(state.object, key, value)
Оригинал
Так что только для тех, кто задается этим вопросом. Он появляется в какой-то момент в Vue 2. * они удалили
this.items.$set(index, val)
в пользуthis.$set(this.items, index, val)
.Сплайс все еще доступен, и вот ссылка на методы мутации массива, доступные в ссылке vue .
источник
Как указывалось ранее - VueJS просто не может отслеживать эти операции (назначение элементов массива). Все операции, которые отслеживает VueJS с массивом, находятся здесь . Но скопирую еще раз:
В процессе разработки возникает проблема - как с этим жить :).
push (), pop (), shift (), unshift (), sort () и reverse () довольно просты и помогают вам в некоторых случаях, но основное внимание уделяется splice () , который позволяет вам эффективно изменять массив это будет отслеживаться VueJs. Так что могу поделиться некоторыми подходами, которые наиболее часто используются при работе с массивами.
Вам нужно заменить элемент в массиве:
// note - findIndex might be replaced with some(), filter(), forEach() // or any other function/approach if you need // additional browser support, or you might use a polyfill const index = this.values.findIndex(item => { return (replacementItem.id === item.id) }) this.values.splice(index, 1, replacementItem)
Примечание: если вам просто нужно изменить поле элемента - вы можете сделать это просто:
this.values[index].itemField = newItemFieldValue
И это будет отслеживаться VueJS, поскольку отслеживаются поля элемента (объекта).
Вам нужно очистить массив:
this.values.splice(0, this.values.length)
На самом деле вы можете сделать гораздо больше с помощью этой функции splice () - ссылка w3schools. Вы можете добавлять несколько записей, удалять несколько записей и т. Д.
Vue.set () и Vue.delete ()
Vue.set () и Vue.delete () могут использоваться для добавления поля в вашу версию пользовательского интерфейса данных. Например, вам нужны дополнительные рассчитанные данные или флаги в ваших объектах. Вы можете сделать это для своих объектов или списка объектов (в цикле):
Vue.set(plan, 'editEnabled', true) //(or this.$set)
И отправьте отредактированные данные обратно в серверную часть в том же формате, сделав это до вызова Axios:
Vue.delete(plan, 'editEnabled') //(or this.$delete)
источник
Одна альтернатива - и более легкий подход к вашей проблеме - может быть, просто временно отредактировать массив, а затем назначить весь массив обратно вашей переменной. Поскольку Vue не отслеживает отдельные элементы, он будет следить за обновлением всей переменной.
Так что это тоже должно работать:
var tempArray[]; tempArray = this.items; tempArray[targetPosition] = value; this.items = tempArray;
Тогда это также должно обновить вашу DOM.
источник