<компонент-которому-нужен-id-пользователя v-if="$store.getters.userId">
watch: {
'$store.getters.userId': {
immediate: true,
handler(userId) {
if (userId) {
...
}
},
},
},
item-class
. Может быть функцией, принимающей объект с данными строки, и возвращающей классы:<v-data-table
:item-class="itemClasses"
...
methods: {
itemClasses: item => ({
red: !(item.id % 3),
}),
...
},
.red {
background: red;
}
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)"
>