calc(100vw - 100%) - ширина сколлбара. Используя это - можно что-то намагичить.:)calc(min(100vw - 100%, 1px) * 10), где результат min будет 1px или 0px в зависимости от наличия скроллбара, а 10 - любой нужный множитель.:)
useApiFetch, очень многое в vue 3 можно сломать неудачной деструктуризацией. Но допустим сам хук нормальный.isPending - это ref, а значит он и должен быть прокси, чтоб собственно работала энтая самая реактивность. Чтоб отобразить в консоли чистый объект - есть хэлпер toRaw(только после этого он уже не будет динамическим).isPending.value - то в консоль, очевидно, попадает значение на момент вызова console.log. Магическим образом прямо в консоли оно уже не изменится.isPending - можешь сделать так:watch(isPending, (value) => console.log('watch isPending', value), { immediate: true });{
beforeCreate() {
this._oldTitle = document.title;
},
unmounted() {
if (this.PAGE_TITLE)
document.title = this._oldTitle;
},
watch: {
PAGE_TITLE: {
handler(val, oldVal) {
if (val)
document.title = val;
else
document.title = this._oldTitle;
},
immediate: true
},
}
}this.PAGE_TITLE. const PAGE_TITLE = ref('<title>'); // computed(() => ...)
// ...
return {
PAGE_TITLE,
// ...
}+ expose({ PAGE_TITLE })
foo?.bar) или nullish coalescing (foo ?? bar), а версия браузера у вас там старая и не поддерживает такой фичи.Chrome <= 70 (а не last 1, что там скорее всего по умолчанию), чтоб при билде он эти фичи заменил на старые альтернативы.
class Users {
constructor() {
this.store = []
}
[Symbol.iterator] = () => this.store[Symbol.iterator]()
}class Users extends Array {
constructor() {
super();
}
}this вместо this.store со всеми методами массива кроме тех которые вы переопределите:).
let newsListItem = defineProps({
newsListItem: Object
});defineProps({
newsListItem: Object
});const props = defineProps({
newsListItem: Object
});function slow(x) { ... }var slow;
slow = function (x) { ... };slow = cachingDecorator(slow);
items.forEach(item => item.alert = false)
import {compile} from "vue"
compile('<custom-component />') // возвращает render-функцию.const [selected, setSelected] = useState('all');
let filterdTodos;
switch(selected) {
case 'all':
filterdTodos = todos;
break;
case 'checked':
filterdTodos = todos.filter(t => t.checked);
break;
case 'notChecked':
filterdTodos = todos.filter(t => !t.checked);
break;
}const [selected, setSelected] = useState('all');
const filterdTodos = useMemo(() => {
switch(selected) {
case 'all':
return todos;
case 'checked':
return todos.filter(t => t.checked);
case 'notChecked':
return todos.filter(t => !t.checked);
}
}, [selected, todos])<select className="todos__filter" onChange={(event) =>setSelected(event.target.value)}>
...
{filterdTodos.map(...)}products должны быть ref. Сейчас они не реактивны(никак не реагируют на изменения). При этом ты присваииваешь массиву value. То что это хоть как-то работало - очередное чудо.export const useAllMainFiltersStore = defineStore('allMainFilters', () => {
const products = ref([]);
try {
async function getStoreData() {
sidebarResizeStore.updateSidebarVisibility()
const data = await productsData();
products.value = data;
}
getStoreData()
} catch (error) {
console.error('Error:', error);
}
return {
products,
}
})const route = useRoute();
// продукт делаем вычисляемым, чтоб не городить вотчеров
const product = computed(() => getProductById(route.params.id));
function getProductById(id) {
console.log('products component: ', mainFiltersStore.products) //при первой загрузке всё ок, при перезагрузке страницы всё ломается и пустой массив в придачу
return products.find(product => product.id == id);
}
watch(product, current => {
// проверяем что продукт есть
if (current) fetchComments(current.id);
}, { immediate: true })inline, тут используется кастомный иконсет settings.