else
:if (state) {
this.x = 'c';
} else if (route) {
this.x = 'b';
} else if (prop) {
this.x = 'a';
}
this.x = [
[ state, 'c' ],
[ route, 'b' ],
[ prop, 'a' ],
].find(n => n[0])?.[1] ?? this.x;
this.x =
state ? 'c' :
route ? 'b' :
prop ? 'a' :
this.x;
switch (true) {
case !!state: this.x = 'c'; break;
case !!route: this.x = 'b'; break;
case !!prop: this.x = 'a'; break;
}
mounted () { ...
x
вычисляемым свойством. v-if="showModal"
на ref="modal"
, добавитьwatch: {
showModal(val) {
$(this.$refs.modal).modal(val ? 'show' : 'hide');
},
},
например на body
<button @click="onClick">
methods: {
onClick() {
document.body.classList.toggle('active');
},
},
<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>
<div v-for="n in squares">
{{ Number.isNaN(+n) ? '' : n }}
</div>
<div v-for="(n, i) in squares">
{{ i % 11 ? '' : n }}
</div>
data: () => ({
itemsToShow: [...Array(10)].map((n, i) => `${i + 1}`),
...
}),
<div v-for="n in squares">
{{ itemsToShow.includes(n) ? n : '' }}
</div>