data: () => ({
size: 52,
col: 0,
row: 0,
}),
methods: {
onMouseMove(e) {
this.col = e.offsetX / this.size | 0;
this.row = e.offsetY / this.size | 0;
},
},
computed: {
blockStyle() {
return {
backgroundSize: `${this.size}px ${this.size}px`,
};
},
blockCursorStyle() {
const { col, row, size } = this;
return {
transform: `translate(${col * size}px, ${row * size}px)`,
width: `${size * 0.95}px`,
height: `${size * 0.95}px`,
};
},
},<div class="block" :style="blockStyle" @mousemove="onMouseMove">
<div class="block-cursor" :style="blockCursorStyle"></div>
</div>В документации не нашёл.
Vue.directive('сarusel', {return this.singleMetricNamesMap.forEach(el => el[this.value.metricId])
metric() { if (this.metric) { this.setSingleMetricNamesMap({ [this.metric.id]: this.metric.name }) } }
this. не нужен:metric(val) {
if (val) {
this.setSingleMetricNamesMap({ [val.id]: val.name });
}
},<v-data-table>
<template #item="{ item }">
<tr>
<td class="какой-то_класс">{{ item['какое-то свойство'] }}</td>
<td class="ещё_какой-то_класс">{{ item['ещё какое-то свойство'] }}</td>
<td class="ну_и_так_далее">{{ item['как видите, ничего сложного'] }}</td>
</tr>
</template>
</v-data-table>v-for={weekDay in this.arWeekDays}выдает ошибку "index is not defined"
<div>
{this.arWeekDays.map(n => <div>{n}</div>)}
</div>data: { circle: document.querySelector(`.circle`) },
.app Vue заменит элементами, которые создаст сам. Если хотите иметь доступ к ним, для этого есть специальный механизм. Т.е., добавляете атрибут ref элементу .circle:<div class="circle" ref="circle"></div>this.circle на this.$refs.circle:this.$refs.circle.style.left = `${e.pageX}px`;
this.$refs.circle.style.top = `${e.pageY}px`;data: () => ({
coords: [ 0, 0 ],
}),
computed: {
style() {
return {
left: this.coords[0] + 'px',
top: this.coords[1] + 'px',
};
},
},
created() {
document.addEventListener('mousemove', e => this.coords = [ e.pageX, e.pageY ]);
},<div class="circle" :style="style"></div>
*-enter-active, *-leave-active и т.д. анимируются удаляемые/добавляемые элементы. Если key не изменился, элемент не будет удалён и заново добавлен, соответственно, и классы не будут добавляться.
<swiper @click="onClick"methods: {
onClick(e) {
const slide = e.target.closest('.swiper-slide');
if (slide) {
console.log(`slide ${slide.dataset.swiperSlideIndex} clicked`);
}
},по клику на чекбокс не происходит фильтрация items
как запустить bootstrap пример
как можно реализовать фильтрацию списка по статусу...
...по клику на кнопки
v-slot:cell(index)="data"slot="index" slot-scope="data"
@submit.prevent. Или клик по кнопке обрабатывайте иначе: @click.prevent="addGuest".
store.dispatch('config/loadMain').then(() => {
new Vue({
...<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
<div id="app" @dragover.prevent="">
<button v-if="done" @click="init">ещё раз</button>
<div v-else>
<div class="questions">
<div
v-for="n in questions"
:class="[ 'card', { hidden: n.done } ]"
draggable="true"
@dragstart="onDragStart($event, n)"
>{{ n.question }}</div>
</div>
<div class="answers">
<div
v-for="n in answers"
:class="[ 'card', { hidden: n.done } ]"
@drop="onDrop(n)"
>{{ n.answer }}</div>
</div>
</div>
</div>$side: 75px;
.questions,
.answers {
width: $side * 3;
height: $side * 3;
margin: 10px;
display: inline-block;
}
.card {
display: inline-flex;
justify-content: center;
align-items: center;
border: 1px solid silver;
box-sizing: border-box;
width: $side;
height: $side;
background: red;
color: white;
font-weight: bold;
font-family: monospace;
}
.hidden {
visibility: hidden;
}new Vue({
el: '#app',
data: () => ({
dragged: null,
items: [
{ question: '2 x 2', answer: 4 },
{ question: '5 x 6', answer: 30 },
{ question: '7 x 7', answer: 49 },
{ question: '8 x 4', answer: 32 },
{ question: '7 x 5', answer: 35 },
{ question: '6 x 9', answer: 54 },
{ question: '9 x 8', answer: 72 },
{ question: '6 x 8', answer: 48 },
{ question: '9 x 7', answer: 63 },
].map(n => (n.done = false, n)),
questions: [],
answers: [],
}),
computed: {
done() {
return this.items.every(n => n.done);
},
},
methods: {
onDragStart(e, item) {
this.dragged = item;
},
onDrop(item) {
if (item === this.dragged) {
item.done = true;
} else {
alert('Ты дурак, да?');
}
},
init() {
const { items } = this;
items.forEach(n => n.done = false);
this.questions = [...this.items].sort(() => 0.5 - Math.random());
this.answers = [...this.items].sort(() => 0.5 - Math.random());
},
},
created() {
this.init();
document.addEventListener('dragend', () => this.dragged = null);
},
});