<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()