created() { this.tagsAsArray.forEach((item) => { this.editState[item] = false; }); },
created() {
this.editState = Object.fromEntries(this.tagsAsArray.map(n => [ n, false ]));
},
@onClick="editTagName"
methods: {
weekDay(date) {
return new Date(date).toLocaleString('ru-RU', { weekday: 'short' });
},
titleDate(dates) {
return dates
.map(n => new Date(n).toLocaleString('ru-RU', {
weekday: 'short',
month: 'short',
day: 'numeric',
}))
.join(' - ');
},
},
<v-date-picker
:weekday-format="weekDay"
:title-date-format="titleDate"
/>
data: () => ({
activeElem: null,
...
}),
<Item
:active="activeElem === elem"
@activate="activeElem = elem"
...
/>
props: {
active: Boolean,
...
},
this.$emit('activate'); // когда надо сделать текущий элемент активным
<div class="row__elements" :class="{ active }">
props: {
multiple: Boolean,
...
},
computed: {
placeholder() {
return `Выберите ${this.multiple ? 'несколько значений' : 'одно значение'}`;
},
innerValue: {
get() {
const v = this.value;
return this.multiple || this.options.includes(v) ? v : '';
},
set(val) {
this.$emit('input', val);
},
},
},
<select v-model="innerValue" :multiple="multiple">
<option disabled value="" v-text="placeholder"></option>
<option v-for="n in options">{{ n }}</option>
</select>
Error: [vuex] do not mutate vuex store state outside mutation handlers.
this.$store.commit('vehicles/addVehicle', { ...this.vehicle });
// или
addVehicle: (state, payload) => state.vehicles.push({ ...payload }),
methods: {
createNewVehicle: () => ({
name: '',
description: '',
rent: '',
type: 'custom',
}),
...
data() {
return {
vehicle: this.createNewVehicle(),
};
},
this.$store.commit('vehicles/addVehicle', this.vehicle);
this.vehicle = this.createNewVehicle();
<span>{{ result.prices[result.indexOfSize] }}</span>
items: [
{ size: '256GB', price: '99 999' },
{ size: '512GB', price: '105 999' },
],
index: 0,
<label v-for="(n, i) in result.items">
<input type="radio" :value="i" v-model.number="result.index">
<span>{{ n.size }}</span>
</label>
computed: {
selectedItem() {
return this.result.items[this.result.index];
},
...
<span>{{ selectedItem.price }}</span>
@click="menuShow=!menuShow,goToBlock"
@click="menuShow = !menuShow, goToBlock($event)"
. Ну а лучше бы конечно сделать новый метод (если goToBlock действительно нужен как отдельный метод, в противном случае достаточно унести в него переключение menuShow), как-то так:methods: {
goToBlock(selector) {
document.querySelector(selector).scrollIntoView({
behavior: 'smooth',
});
},
onMenuItemClick(e) {
this.menuShow = false;
this.goToBlock(e.target.getAttribute('href'));
},
},
@click.prevent="onMenuItemClick"
computed: {
needWatch() {
return Object.fromEntries(Object.entries(this.obj_lev_1).map(n => [ n[0], n[1].need_watch ]));
},
},
watch: {
needWatch(newVal, oldVal) {
const [ k, v ] = Object.entries(newVal).find(n => n[1] !== oldVal[n[0]]);
alert(`${k}.need_watch changed from ${oldVal[k]} to ${v}`);
},
},
editTask (task, index) {
v-model="editidTask.title"
task.title = this.editTask.title
this.tasks.map((task, index) => { if (index === this.editidTask.id) {
mounted() {
const observer = new IntersectionObserver(entries => {
if (entries[0].isIntersecting) {
stopObservation();
// здесь запрашивайте свои данные
}
}, {
threshold: 1,
});
observer.observe(this.$el);
const stopObservation = () => observer.disconnect();
this.$on('hook:beforeDestroy', stopObservation);
},
props: [ 'value', 'placeholder' ],
<div>
<input
:class="value ? 'input_filled' : ''"
:value="value"
@input="$emit('input', $event.target.value)"
>
<span>{{ placeholder }}</span>
</div>
data: () => ({
opened: [],
...
}),
watch: {
opened: {
immediate: true,
handler(val) {
const id = this.treeitems[0].id;
if (!val.includes(id)) {
val.push(id);
}
}
},
...
},
:open.sync="opened"
Разбираюсь, как устроен vuejs
в this экземпляр vue
дошел до "v-model изначально равным соответствующему значению из объекта data" и не понимаю как это сделать
<el-form-item v-for="n in formItems">
<el-input v-model="n.value" />
<el-form-item v-for="n in formItems">
<el-input v-model="n.obj[n.key]" />