data: () => ({
selected: null,
...
}),<tr v-for="(n, i) in (selected || objSearch)">@click="selected = selected ? null : { [i]: n }".hidden {
visibility: hidden;
}<tr
v-for="(n, i) in objSearch"
:class="{ hidden: selected !== null && selected !== i }"
>@click="selected = selected === null ? i : null"
overflow: scroll или overflow-y: scroll.
computed: {
sum() {
return this.selected.reduce((acc, n) => acc + +n, 0);
},
},<v-checkbox
class="light--text"
v-model="service.checked"
:label="`${service.cost} руб.`"
></v-checkbox>computed: {
sum() {
return this.services.reduce((acc, n) => acc + n.cost * n.checked, 0);
},
},computed: {
minStart() {
return Math.min(...this.competitors.map(n => n.start));
},
maxSpeed() {
return Math.max(...this.competitors.map(n => n.speed));
},
},<tr v-for="{ start, speed } in competitors">
<td :class="{ best: start === minStart }">{{ start }}</td>
<td :class="{ best: speed === maxSpeed }">{{ speed }}</td>
</tr><yandex-map
ref="map"
...<button
@click="$refs.map.myMap.balloon.open(координаты, содержимое)"
...Начал изучать VueJS. Читал документацию очень много и долго.
new Vue.componentuser() {
return new Proxy(this.$store.state.user, {
set: (target, prop, value) => {
this.$store.commit('updateUser', { [prop]: value });
return true;
},
});
},updateUser(state, payload) {
Object.assign(state.user, payload);
},beforeMount() { // какой тут хук использовать? const fields = ['input1', 'input2'] fields.forEach(item => this[item] = '') // я правильно добавляю в this, а не в this.$data? }
Объект с данными, над которым экземпляр Vue осуществляет наблюдение. Экземпляр проксирует сюда вызовы своих полей. (Например,vm.aбудет указывать наvm.$data.a)
Vue не может обнаружить добавление или удаление свойства. Так как Vue добавляет геттер/сеттер на этапе инициализации экземпляра, свойство должно присутствовать в объектеdataдля того чтобы Vue преобразовал его и сделал реактивным.
<...>
Во Vue нельзя динамически добавлять новые корневые реактивные свойства в уже существующий экземпляр.
data: () => ({
inputs: Array(20).fill(''),
}),<div v-for="(n, i) in inputs">
Значение #{{ i }}:
<input v-model="inputs[i]">
{{ n }}
</div><input type="date" v-model="years.start">
<input type="date" v-model="years.end">
<div v-for="n in months">
<h3>{{ n.year }}, {{ n.name }}</h3>
<div>{{ n.days }}</div>
</div>data: () => ({
years: {
start: null,
end: null,
},
}),
computed: {
months() {
const start = moment(this.years.start).startOf('month');
const end = moment(this.years.end).endOf('month');
const months = [];
for (; start < end; start.add(1, 'day')) {
const [ year, name, day ] = start.format('YYYY.MMMM.D').split('.');
if (day === '1') {
months.push({
year,
name,
days: [],
});
}
months[months.length - 1].days.push(+day);
}
return months;
},
},отследить появление содержимого блока
<app-analytics-chart v-if="analytics.countOrdersByMonth"data: () => ({
image: 0,
images: [ 'раз картинка', 'два картинка', 'три картинка' ],
}),<button v-for="(n, i) in images" @click="image = i">
Показать картинку #{{ i }}
</button>
<transition name="image" mode="out-in">
<img :key="image" :src="images[image]">
</transition>.image-enter-active,
.image-leave-active {
transition: opacity .3s;
}
.image-enter,
.image-leave-to {
opacity: 0;
}Вариант добавить в лоб, как я сделал это выше class='test', не сработал.
Этот класс применился к input. А мне нужно применить класс к самому select, который появляется перед закрывающим тегом body.