methods: {
onFileChange(e) {
const file = e.target.files[0];
if (file) {
const reader = new FileReader();
reader.onloadend = () => {
const image = new Image();
image.onload = () => {
this.$emit('uploaded', {
file,
src: image.src,
});
};
image.src = reader.result;
};
reader.readAsDataURL(file);
}
},
},<i
v-text="img.src ? 'x' : '+'"
@click="$emit('remove')"
...
/>
<img
v-if="img.src"
:src="img.src"
...
>
<input type="file" accept="image/*" @change="onFileChange">v-model. В props переименовываете images в value, убираете из дефолтного значения объект с пустыми полями. Добавляете images в computed - в качестве значения будет копия value плюс, если длина value меньше максимально допустимой, тот объект с пустыми полями; сеттер - отправляет родителю images, из которого выкинут пустой объект:props: {
value: Array,
max: {
type: Number,
default: 3,
},
},
computed: {
images: {
get() {
const images = [...this.value];
if (images.length < this.max) {
images.push({
file: null,
src: null,
});
}
return images;
},
set(val) {
this.$emit('input', val.filter(n => n.file));
},
},
},methods: {
onUpload(index, img) {
this.images = this.images.map((n, i) => i !== index ? n : img);
},
remove(index) {
this.images = this.images.filter((n, i) => i !== index);
},
},<input-img
v-for="(n, i) in images"
:img="n"
@uploaded="onUpload(i, $event)"
@remove="remove(i)"
/>data: () => ({
images: [],
}),<set-imgs v-model="images" :max="5" />
<div id="app">
<todo-add @todo-new="addNewTodo"></todo-add>
<pre>{{ todoJson }}</pre>
</div>Vue.component('todo-add', {
template: `
<div>
<input v-model="name" autofocus></input>
<button @click="add">Add New Todo</button>
</div>`,
data: () => ({
name: '',
}),
methods: {
add() {
const name = this.name.trim();
if (name) {
this.$emit('todo-new', name);
this.name = '';
}
},
},
});
new Vue({
el: '#app',
data: {
todoArr: [
{ id: 1, name: 'hello, world!!' },
],
},
methods: {
addNewTodo(name) {
this.todoArr.push({
id: 1 + Math.max(0, ...this.todoArr.map(n => n.id)),
name,
});
},
},
computed: {
todoJson() {
return JSON.stringify(this.todoArr, null, 2);
},
},
});Vue.set(this.response.order.ordersItemsInfo[id], 'ordersItemsPropertiesInfo', [])data: () => ({
items: [ 'active1', 'active2', 'active3' ],
active: false,
}),<button @click="active = !active"></button>
...
<div v-for="n in items" :class="{ [n]: active }"></div>await setTimeoutawait new Promise(r => setTimeout(r, 1000)).catch((e)=>{this.handleUsersListErrors(e)})data: () => ({
status: 'unknown',
val: 'empty',
}),
methods: {
getVal() {
this.status = 'awaiting request answer';
return new Promise((...r) => {
setTimeout(() => {
const max = 10000;
this.val = Math.random() * max | 0;
r[+(this.val < max * 0.9)]();
}, 1000);
}).catch(this.handleError);
},
handleError() {
this.status = 'ERROR, awaiting new request';
return new Promise(r => setTimeout(r, 2000)).then(this.getVal);
},
},
async created() {
await this.getVal();
this.status = 'OK';
},<div>status: {{ status }}</div>
<div>value: {{ val }}</div>isBarMenuClicked: false, // эту переменную нужно передать
$emit('click'), подписывайтесь на событие в родительском компоненте, переключайте там значение переменной, отвечающей за открытость меню и передавайте её в меню как параметр.
return?const events = [];
collectEvents:
for(let z = 0; z < arrOfEvents.length; z++){return memo заменяете наevents.push(memo);
continue collectEvents;return events;.
state: {
date: null,
interval: null,
},
mutations: {
update(state) {
state.date = new Date();
},
start(state) {
if (!state.interval) {
state.interval = setInterval(this.commit, 1000, 'update');
}
},
stop(state) {
if (state.interval) {
clearInterval(state.interval);
state.interval = null;
}
},
},computed: {
timerActive() {
return !!this.$store.state.interval;
},
timeStr() {
const { date } = this.$store.state;
return date instanceof Date
? [ 'getHours', 'getMinutes', 'getSeconds' ]
.map(n => `${date[n]()}`.padStart(2, 0))
.join(':')
: 'ВРЕМЕНИ НЕТ';
},
},
created() {
this.$store.commit('start');
},<button @click="$store.commit('start')" :disabled="timerActive">start</button>
<button @click="$store.commit('stop')" :disabled="!timerActive">stop</button>
<div>{{ timeStr }}</div>v-on="условие ? { событие: обработчик } : {}"v-on="{ событие: условие ? обработчик : null }"
хочу, чтобы модальное окно отображалось столько раз, сколько событий в дне, и каждый раз с подробной информацией о новом событии
computed: {
detailInformationOfEvent() {
return this.detailInformationOfEvents[0];
},
...this.detailInformationOfEvents.push({
...
});v-show="detailInformationOfEvent"detailInformationOfEvents.shift()