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] = itemthis.$set(this.selectedItems, itemName, item)
transit.$on('response_data', msg => {
this.results = msg.split('\n').filter(Boolean).map(n => JSON.parse(n));
});одно из вложенных свойств через v-model привязывается к чекбоксу
<...>
при попытке прописать v-if с использованием этого свойства, при его изменении ничего в DOM не меняется
v-model, при первом изменении состояния чекбокса. А vue, как известно, не может обнаружить добавление свойства объекта. Так что это свойство, чтобы оно стало реактивным, должно изначально присутствовать в объекте, и, раз оно используется для задания состояния чекбоска, то пусть дефолтным значением будет false.v-model добавляет отсутствующие свойства как реактивные.
data: () => ({
activeClass: '',
...
}),<p :class="activeClass"></p>data: () => ({
classes: [ 'какой-то класс', 'ещё класс', ... ],
...
}),<p
v-for="n in classes"
@mouseover="activeClass = n"
@mouseout="activeClass = ''"
>groupedItems() {
return this.items.reduce((acc, n) => {
for (const k in n) {
acc[k] = acc[k] || {};
acc[k][n[k]] = (acc[k][n[k]] || 0) + 1;
}
return acc;
}, {});
}<div v-for="(group, groupName) in groupedItems">
<h3>{{ groupName }}:</h3>
<div v-for="(value, key) in group">{{ key }} ({{ value }})</div>
</div>methods: {
onClick1() {
alert('button1 clicked');
},
onClick2() {
this.$refs.button.click();
},
},<button @click="onClick1" ref="button">button1: click me</button>
<button @click="onClick2">button2: click button1</button>