<div :class="headerClass">computed: {
headerClass() {
return в зависимости от this.$route;
},
},methods: {
onKeyPress(e) {
if (/* нажато что надо */) {
this.$refs.searchInput.focus();
}
},
},
created() {
document.addEventListener('keypress', this.onKeyPress);
this.$on('hook:beforeDestroy', () => document.removeEventListener('keypress', this.onKeyPress));
},this.props.options@click="selectCity"selectCity(e, { cityCode, storeId, name }) {$event):@click="selectCity(city)"selectCity({ cityCode, storeId, name }) {
...18 элементов tbody <...> недопустимо
div внутри tbody
нужно сделать один циклом
to зависящим от текущего маршрута:computed: {
catalogRoute() {
return {
name: 'catalog',
params: {
module: this.$route.name === 'catalog'
? this.$route.params.module.replace(/\d+/, m => +m + 1)
: 'view-1',
},
};
},
},<router-link :to="catalogRoute">
export const store = new Vuex.Store({ на export default new Vuex.Store({. Или import store from './store'; на import { store } from './store';.
@input="$emit('input', $event.target.value)", или сделайте вычисляемое свойство:innerValue: {
get() {
return this.value;
},
set(val) {
this.$emit('input', val);
},
},<select v-model="innerValue">
.hover на .square:hover - всё, больше ничего не надо. Если есть возможность что-то сделать только через css - делайте это что-то только через css.мне нужно было использовать именно через script, потому,что я потом буду манипулировать этим методом chhoseShipOnBoard, например ещё добавлять классы к соседним блокам, чтобы при наведении выделялся не только текущий блок, но и несколько рядом находящихся блоков
data: () => ({
hovered: null,
...
}),
methods: {
getClasses(index) {
return что-то, в зависимости от index и this.hovered;
},
},<span
v-for="(n, i) in squares"
@mouseover="hovered = i"
@mouseout="hovered = null"
:class="getClasses(i)"
>Я так понимаю надо какой-то фильтр применить для отображения?
filters: {
numberOnly: val => /^\d+$/.test(val) ? val : '',
},<div v-for="n in squares">
{{ n | numberOnly }}
</div>methods: {
numberOnly: val => Number.isInteger(+val) ? val : '',
},<div
v-for="n in squares"
v-text="numberOnly(n)"
></div>computed: {
numbersOnly() {
return this.squares.map((n, i) => i % 11 ? '' : n);
},
},<div
v-for="n in numbersOnly"
:text-content.prop="n"
></div><div
v-for="n in squares"
v-html="n.match(/\D/) ? '' : n"
></div>v-model чекбоксов. Вычисляемое свойство, управляющее выбором всех чекбоксов, переписываете следующим образом: в геттере сравниваете длины массивов всех элементов и выбранных, в сеттере устанавливаете значение вычисляемого свойства выбранных элементов. Например.
data: () => ({
active: null,
}),<div class="item" v-for="i in 5">
<div class="parent" @click="active = active === i ? null : i">
<div class="child" :class="active === i ? 'green' : 'red'">{{ i }}</div>
</div>
</div>data: () => ({
items: Array(5).fill(false),
}),<div class="item" v-for="(n, i) in items">
<div class="parent" @click="$set(items, i, !n)">
<div class="child" :class="{ green: n, red: !n }">{{ i + 1 }}</div>
</div>
</div>props: [ 'text' ],
data: () => ({
active: 0,
}),<div class="item">
<div class="parent" @click="active ^= 1">
<div class="child" :class="[ 'red', 'green' ][active]">{{ text }}</div>
</div>
</div>data: () => ({
items: Array.from({ length: 5 }, (_, i) => `item #${-~i}`),
}),<v-item v-for="n in items" :text="n"></v-item>