expanded-item:<v-data-table
:headers="mainTableHeaders"
:items="mainTableItems"
item-key="mainTableItemKey"
show-expand
>
<template #expanded-item="{ headers, item }">
<td :colspan="headers.length">
<v-data-table
:headers="nestedTableHeaders"
:items="item.nestedTableItems"
></v-data-table>
</td>
</template>
</v-data-table>при клике на строчку
show-expand, добавляем обработчик клика, где отображение дополнительного контента будет переключаться вручную:methods: {
onRowClick(item, row) {
row.expand(!row.isExpanded);
},
...<v-data-table
@click:row="onRowClick"
...v-text-field подобной возможности не предоставляет, так что придётся закостылить.<v-text-field @click.native="onClick">methods: {
onClick({ target: t }) {
if (
t.classList.contains('v-messages__message') &&
t.closest('.v-messages.error--text')
) {
// ну да, кликнули по сообщению об ошибке
}
},
},v-model, обновил данные в компоненте; устанавливаете отформатированное значение. Для предотвращения рекурсивной обработки событий input проверяете isTrusted:function updateValue(el) {
el.value = el.value, из которого удалено всё, кроме цифр;
el.dispatchEvent(new Event('input'));
el.value = форматированное значение el.value;
}
function onInput(e) {
if (e.isTrusted) {
updateValue(e.target);
}
}
Vue.directive('number', {
bind(el) {
el.addEventListener('input', onInput);
updateValue(el);
},
update(el) {
updateValue(el);
},
unbind(el) {
el.removeEventListener('input', onInput);
},
});с минимальным количеством действий
v-for="el in link" на v-for="el in [].concat(link)".
transition-duration: 0ms;.transition: none;.true, не нужна анимация - false. Как-то так.
.frame { на .slider /deep/ .frame {.mounted() { for (let i = 0; i < 3; i++) { let frame = document.createElement("div"); frame.classList.add("frame"); //класс присваивается но стили не применяются this.$refs.slider.appendChild(frame); } },
По одному работает, если отметить оба, то "Error in v-on handler: "TypeError: Cannot convert undefined or null to object"
validations() {
return {
life: this.property ? {} : { required: v => v },
property: this.life ? {} : { required: v => v },
};
},<div>STATUS: {{ $v.$invalid ? 'ЖОПА' : 'OK' }}</div>$addres.val("Мои данные").change();.change() на [0].dispatchEvent(new Event('input')).
state: {
characters: [],
page: 0,
pages: 0,
},
mutations: {
setCharacters: (state, { characters, pages, page }) =>
Object.assign(state, { characters, pages, page }),
},
actions: {
async fetchCharacters({ commit }, page = 1) {
try {
const { data: { info, results } } = await axios.get(`${BASE_URL}?page=${page}`);
commit('setCharacters', {
page,
pages: info.pages,
characters: results,
});
} catch (e) {
console.error(e);
}
},
},computed: {
currentPage: {
get() {
return this.$store.state.page;
},
set(page) {
this.$store.dispatch('fetchCharacters', page);
},
},
},<el-pagination
v-model:current-page="currentPage"
:page-count="$store.state.pages"
layout="prev, pager, next"
background
/>to элемент списка начинает работать как ссылка - внутри v-list-item будет создаваться router-link, который в вашем случае создать невозможно, по причине отсутствия роутера. Ну и всё, дальше выяснять, что конкретно и почему не работает - не интересно.v-model. Если через v-model - не надо пытаться указывать to.
data: () => ({
sortOptions: [
{ value: 'PriceMinMax', text: 'сначала дешевле' },
{ value: 'PriceMaxMin', text: 'сначала дороже' },
],
...
}),<ul>
<li
v-for="n in sortOptions"
v-text="n.text"
:class="{ active: sortBy === n.value }"
@click="sortBy = n.value"
></li>
</ul>li.active {
color: red;
}data() {
return {
dates: [ массив допустимых дат, в числовом виде (количество миллисекунд) ],
disabledFn: {
customPredictor: date => !this.dates.includes(new Date(date).setHours(0, 0, 0, 0)),
},
};
},<datepicker :disabledDates="disabledFn" />
присваивание всем переменным, которые используются в компоненте, их дефолтное значение мне тоже кажется не лучшей идеей
GET_CHARACTERS? Не вижу. Надо добавить.let data = await axios.get(baseURL); context.commit('SET_CHARACTERS', data)
const response = await axios.get(baseURL);
context.commit('SET_CHARACTERS', response.data.results);<div>{{ $store.state.characters }}</div><div v-for="n in $store.state.characters">
{{ n.name }}
</div>