let index = -1;
setInterval(() => {
index = (index + 1) % array.length;
console.log(array[index]);
}, 500);
Показалось будет неудобно юзать в Вью компоненте. Мне надо при наведении мышки показывать по кругу картинки из массива и останавливать при убирании мышки.
<div
@mouseenter="установитьИнтервал"
@mouseleave="сброситьИнтервал"
>
methods: {
установитьИнтервал() {
this.interval = setInterval(() => { ... }, 666);
},
сброситьИнтервал() {
clearInterval(this.interval);
},
},
data: () => ({
questions: [
{
text: '2 x 2?',
answers: [ '5', '3', '69', '187' ],
},
{
text: '...',
answers: [ '...', '...', ... ],
},
...
],
}) ,
props: [ 'text', 'answers', 'value' ],
<div>{{ text }}</div>
<div v-for="n in answers">
<label>
<input
type="radio"
:checked="n === value"
@change="$emit('input', n)"
>
{{ n }}
</label>
</div>
props: [ 'questions' ],
data: () => ({
index: 0,
answers: [],
}),
<div v-if="index < questions.length">
вопрос
</div>
<div v-else>
результаты
</div>
<question
v-bind="questions[index]"
v-model="answers[index]"
/>
:disabled="!answers[index]"
; б) скрывать - v-show="answers[index]"
):<button @click="index++">дальше</button>
<div v-for="(n, i) in questions">
{{ n.text }} - {{ answers[i] }}
</div>
return this.$store.authInfo
this.$store.state.authInfo
? :class="form.FirstName !== null ? form.FirstName ? 'input-successes' : 'input-error' : ''"
:class="{ 'input-successes': form.FirstName, 'input-error': form.FirstName === false }"
:class="form.FirstName !== null && [ 'input-error', 'input-successes' ][+form.FirstName]"
:class="({ true: 'input-successes', false: 'input-error' })[form.FirstName]"
после перезагрузки страницы получаю undefined
правильно ли я возвращаю копию значения с объекта store.singleMetricNamesMap
$store.state.singleMetricNamesMap[value.metricId]
. Если так по-вашему слишком длинно - сделайте в компоненте вычисляемое свойство, которое будет представлять singleMetricNamesMap. width: 100% !important;
, а родительский элемент canvas'а карты имеет нулевые размеры.new ymaps.Map("map", {
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`;
*-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"