v-model="selected"
на v-model="selected[i]"
.null
, которые vue подставляет для индексов без установленных значений, то массив можно заменить объектом. self.model.child = response.data.folders;
self.$set(self.model, 'child', response.data.folders);
g
:Vue.filter('lhprob', val => val && val.toString().replace(/ /g, 'GG'));
[Vue warn]: Failed to resolve filter
. get () { this.$store.getters['newRequest/selectedCreditStatus'] }
Замечу, что, не хотелось бы отказываться от геттеров и сеттеров в пользу всяких data () {} и methods: {}. Уже делал в таком варианте и получилось довольно громоздко и некрасиво.
v-model
? - это привязка значения + прослушивание события. Т.е.,:value="геттер"
+ @input="мутация($event.target.value)"
Vue использует алгоритм, минимизирующий перемещение элементов
Vue изменяет порядок следования элементов, основываясь на изменении порядка ключей
data: () => ({
value: '',
}),
computed: {
style() {
return {
width: `${20 + this.value.length * 10}px`,
};
},
},
<input v-model="value" :style="style">
<i class="icon-arrow-down" @click="updateCount(good, -1)"></i>
<i class="icon-arrow-top" @click="updateCount(good, 1)"></i>
methods: {
updateCount(good, change) {
good.count = Math.max(0, good.count + change);
},
},
data: () => ({
numShow: 0,
...
computed: {
itemsToShow() {
return this.items.slice(0, this.numShow);
},
...
methods: {
showNext() {
this.numShow = Math.min(this.items.length, this.numShow + 1);
},
hidePrev() {
this.numShow = Math.max(0, this.numShow - 1);
},
...
<transition-group
@after-enter="showNext"
@after-leave="hidePrev"
...
>
<div
v-for="(n, i) in itemsToShow"
:key="n.id"
...
>
...
methods: {
run() {
this.numShow += ({
0: 1,
[this.items.length]: -1,
})[this.numShow] || 0;
},
...
data: () => ({
types: [
{ id: null, name: 'Все' },
{ id: ..., name: '...' },
{ id: ..., name: '...' },
...
],
active: null,
...
<button v-for="n in types" @click="active = n.id">{{ n.name }}</button>
<!-- или -->
<select v-model="active">
<option v-for="n in types" :value="n.id">{{ n.name }}</option>
</select>
<!-- или -->
<label v-for="n in types">
<input type="radio" name="type" :value="n.id" v-model="active">
{{ n.name }}
</label>
computed: {
filteredItems() {
const { items, active } = this;
return active ? items.filter(n => n.type === active) : items;
},
...
<tr v-for="(n, i) in filteredItems">
...
v-on:edit="editText($event, item)"
editText(operation, item) {
item.text = operation.api.origElements.innerHTML;
},
this.selectedItems[itemName] = item
this.$set(this.selectedItems, itemName, item)
transit.$on('response_data', msg => {
this.results = msg.split('\n').filter(Boolean).map(n => JSON.parse(n));
});