font-display.
useApiFetch, очень многое в vue 3 можно сломать неудачной деструктуризацией. Но допустим сам хук нормальный.isPending - это ref, а значит он и должен быть прокси, чтоб собственно работала энтая самая реактивность. Чтоб отобразить в консоли чистый объект - есть хэлпер toRaw(только после этого он уже не будет динамическим).isPending.value - то в консоль, очевидно, попадает значение на момент вызова console.log. Магическим образом прямо в консоли оно уже не изменится.isPending - можешь сделать так:watch(isPending, (value) => console.log('watch isPending', value), { immediate: true });function manualSmoothScroll(event) {
// находим хэш ссылу по которой мы кликнули
const id = event.target.closest('a[href^="#"]')?.hash;
// если клик куда-то ещё - ничего не делаем
if (!id) return;
// находим цель куда будем скроллить по хэшу
const target = document.querySelector(id);
// если не нашли - ничего не делаем
if (!target) return;
// отменяем стандартный переход
event.preventDefault();
// едем руками
target.scrollIntoView({ behavior: "smooth" });
}
// при загрузке
addEventListener('click', manualSmoothScroll, true);
// при выгрузке
removeEventListener('click', manualSmoothScroll, true);
// если действовать надо только в рамках элнметата
// elementRef.value.addEvent... elementRef.value.removeve...
// или this.$refs.element...
// или this.$el...{
path: '/catalog/mebel',
children: [
{
path: 'page-:page(\\d+)?',
alias: '',
component: Mebel,
},
{
path: ':category',
children: [
{
path: 'page-:page(\\d+)?',
alias: '',
component: MebelCategory
},
{
path: ':article',
component: MebelArticle
}
]
},
],
}if (error.value?.statusCode !== 404) не гарантирует, что в user не будет null, мало ли там ошибка 50х или даже нет ошибки, а просто сервер глюканул.if (!user) {
throw new Error('empty responce')
}useFetch которая внутри себя скастует тип по новому или изменение самого типа useFetch.
transformAssetUrls. Однако открыв доки я вижу там: Converts src to provider optimized URLs
import img from '~/assets/images/header.jpg'?
const myDirective = {
created(el, binding, vnode, prevVnode) {
otherDirective?.created(el, binding, vnode, prevVnode);
...
},
beforeMount(el, binding, vnode, prevVnode) {
otherDirective?.beforeMount(el, binding, vnode, prevVnode);
...
},
....
}import { useSlots, withDirectives, resolveDirective } from 'vue'
export default {
setup() {
const htmlDirective = {
mounted(el, html) {
el.innerHTML = html.value
}
}
const colorDirective = {
mounted(el, color) {
el.style.color = color.value
}
}
// const someDirective = resolveDirective('some-directive');
const slots = useSlots();
return () => withDirectives(slots.default()[0], [
[htmlDirective, 'some html'],
[colorDirective, 'red'],
])
}
}<wrapper><some-compnent /></wrapper>
item, где одновременно были бы равны item.product.article, item.size и item.warehouse.id, т.к. только в таком случае ветка уйдёт в нужную вам сторону. Если логика предполагалась какой-то другой - уточняйте.reactive вместо ref, код чище и приятней будет.
function concatenateFieldValue(previous, value) {
if (typeof value !== 'string')
value = String(value);
if (!previous)
return value;
const uniqueValues = splitFieldValues(previous);
uniqueValues.add(value.trim());
return [...uniqueValues].join(' ');
}
function splitFieldValues(values) {
return new Set(values.split(' ').filter(Boolean));
}
function getUpdatedQuery(query, field, value) {
return {
...query,
[field]: concatenateFieldValue(query[field], value)
}
}
this.$router.push({
query: getUpdatedQuery(
this.$route.query,
itemNameParent,
e.target.value
)
});import(), будет лежать в отдельном js файле, который подгрузится только когда попросят.