data: () => ({
items: [ 'имя-компонента-1', 'имя-компонента-2', 'имя-компонента-3' ],
selected: null,
}),<li
v-for="n in items"
v-text="n"
@click="selected = n"
></li><component v-if="selected" :is="selected"></component>theaddraggable добавляете атрибут element="tbody"tr из шаблона компонента table-operations выбрасываете, v-for будет по item-operationitem-operation оборачиваете все td в один общий tr
<button @click="someFunction($event.target)">Click!</button>повесить на него определенный класс
Теперь вопрос в другом. Как правильно поступать. Если объекты и массивы передаются по ссылке? делать еще одну операцию по копированию?
let puzzles = getters.getPuzzleslet puzzles = [...getters.getPuzzles]
Через масив slides(условно) их не выведешь т.к контент у них различаеться...
this.rooms - массив, объект, есть ли у него вложенные объекты? Раз уж решили не показывать, что это такое...this.rooms попробовать присваивать JSON.parse(JSON.stringify(this.rooms)) (правда, если внутри есть методы, они отвалятся).this.rooms использовать этот метод:methods: {
createRooms() {
return {
...
};
},
...this.period[moment(itr.next().toDate()).format('YYYY-MM-DD')] = this.createRooms();<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.0.1/vue-router.min.js"></script>
<div id="app" :style="appStyle">
<transition name="route-change">
<router-view class="route"></router-view>
</transition>
</div>const router = new VueRouter({
routes: [
[ '/', 'home', 'black' ],
[ '/xxx', 'hello, world!!', 'red' ],
[ '/yyy', 'fuck the world', 'green' ],
[ '/zzz', 'fuck everything', 'blue' ],
].map(([ path, text, color ]) => ({
path,
component: {
template: `<div style="background: ${color};">${text}</div>`,
},
})),
});
new Vue({
router,
el: '#app',
data: () => ({
routeIndex: 0,
}),
computed: {
appStyle() {
return {
height: `${100 * (this.$router.options.routes.length + 1)}vh`,
};
},
},
watch: {
routeIndex(val) {
const { $router } = this;
const { routes } = $router.options;
const index = Math.max(0, Math.min(routes.length - 1, val | 0));
$router.push(routes[index].path);
},
},
mounted() {
const onScroll = () => this.routeIndex = window.scrollY / window.innerHeight | 0;
onScroll();
window.addEventListener('scroll', onScroll);
},
});html, body {
margin: 0;
}
.route {
width: 100vw;
height: 100vh;
position: fixed;
display: flex;
justify-content: center;
align-items: center;
color: white;
font: bold 64px monospace;
transition: transform 0.2s ease-in;
}
.route-change-enter {
transform: translateX(100%);
}
.route-change-enter-to,
.route-change-leave {
transform: translateX(0);
}
.route-change-leave-to {
transform: translateX(-100%);
}Есть подозрение что...
v-for="room in rooms".v-model="room" на v-model="period[day][room_index]".
сomputed: {
checked: {
get() {
return this.$store.state.checked
},
set(val) {
this.$store.commit('updateChecked', val)
}
}
}каким образом сделать зависимость? То есть select model не должен быть активен пока select brand не выбран
как в select model передать данные, которые выводятся в консоль после выбора объекта?
data: () => ({
auth: null,
}),
methods: {
checkUser() {
...
// указываем false только в случае отрицательного результата проверки
this.auth = false;
...
},
},<template v-else-if="auth === false">
ФОРМА АВТОРИЗАЦИИ
</template>Можно как-то в зависимости от даты отсортировать данные из массива по этим блокам?
То есть в блок "Сегодня" уходит 2018-05-28
В блок "Вчера" 2018-05-27
data: () => ({
entity: [
{ id: 1, name: 'title', value: 'default title' },
{ id: 2, name: 'address', value: 'default address' },
],
}),
computed: {
item() {
return this.entity.reduce((acc, n) => (acc[n.name] = n.value, acc), {});
},
},<div v-for="n in entity" :key="n.id">
<label>
{{ n.name }}
<input type="text" v-model="n.value">
</label>
</div>На div с id 98 и 99 клик работает
greet: function () { alert('Привет!'); }
когда делаю так
template: '<div class = "brick" v-on:click="greet">{{ brick.text }}</div>'
выдает ошибку реактивности
<brick-item @click.native="greet" ...<div @click="$emit('click')" ...<div @click="$listeners.click" ...<div v-on="$listeners" ...
this.array.push('hello'). Вместо этого делайте this.array = [ ...this.array, 'hello' ].this.obj.prop = value будет this.obj = { ...this.obj, prop: value }.watch: { array: function (o, n) { this.oldData = o this.newData = n } }
Первое что приходит в голову это создать блоки нужного размера и настроить позицию фона.
Но что-то мне подсказывает, что это не лучшее решение
Как бы вы это сделали с позиции проектирования и производительности?
Никогда не имел дела с Canvas, насколько я понимаю, он тут тоже может помочь
Использую карусель vue-slick...
Есть кнопка "добавить слайд", после которой нужно "перезапустить" слайдер. <...> Пробую использовать в методе добавления слайда this.$refs.slick.$reSlick(), ничего не получается.$refs.slick.destroy; затем изменение данных, на основе которых строится разметка слайдов; и наконец, вызов $refs.slick.create, обёрнутый в $nextTick.
computed: {
routeAnimation() {
return что-то, зависящее от this.$route;
},
},<transition :name="routeAnimation">
<div :key="routeAnimation"></div>
</transition>@click="pushNumbars() reader.push(*)"