{
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
}
]
},
],
}this.$watch(() => this.$route, (x) => {
this.length = this.$route.query.length;
this.width = this.$route.query.width;
this.height = this.$route.query.height;
}, {deep: true, immediate: true});function useState(initialValue) {
// подсчитываем вызовы useState в компоненте
component.useStateCount++;
// если уже был вызов этого useState(т.е. это не первая отрисовка)
if (component.useStateCount in component.useStateCache)
// возвращаем результат из кэша
return component.useStateCache[component.useStateCount];
// если первый вызов - подготавливаем ответ вида [state, setState]
const useStateResult = [
initialValue,
function setState(callbackOrValue) {
// если аргумент setState - функция
if (typeof callbackOrValue === 'function') {
// вызываем её с предыдущем значением в качестве аргумента и присваиваем результат вызова в state
useStateResult[0] = callbackOrValue(useStateResult[0]);
} else {
// иначе просто присваиваем аргумент в state
useStateResult[0] = callbackOrValue;
}
// вызов обновления компонента
component.updateComounent();
}
];
// добавляем в кэш
component.useStateCache[component.useStateCount] = useStateResult;
// возвращаем
return useStateResult;
}if (error.value?.statusCode !== 404) не гарантирует, что в user не будет null, мало ли там ошибка 50х или даже нет ошибки, а просто сервер глюканул.if (!user) {
throw new Error('empty responce')
}useFetch которая внутри себя скастует тип по новому или изменение самого типа useFetch.
pushState и реакцией на popstate.
картинка.src = e.target.result
картинка.onloadend = function()
{
var width = картинка.naturalWidth
var height = картинка.naturalHeight
var соотношение = width/height
картинка.src = создать_картинку(картинка, 1000, 1000/соотношение)
}const result = (blogPosts as Posts)[props.name]blogPosts - нужного типа:// тайпргард: тут проверка что posts действительно Posts;
const isPosts = (posts: unknown): posts is Posts => !!posts
&& typeof posts === 'object'
//&& ... ;
if (!isPosts(blogPosts)) throw new Error('wrong blogPosts');
const result = blogPosts[props.name];class A { id!: string }
class B { id!: string }
class C {
id!: string;
value!: number;
}
const foo: A = new B(); // ok
const bar: A = new C(); // still okunknown. Функции проверки что неизвестный тип является конкретным называются тайпгарды: function isString(arg: unknown): arg is string {
return typeof arg === 'syting'
}[class^="chat__root__"] . Заметьте я использовал не полное имя класса, а только начало и модификатор ^= указывающий сверять только начало(если класс не первый, то можно использовать *=). Почему? Потому что "непонятные буковки" в конце - это генерируемый при сборке хэш, который поменяется при выпуске следующей версии фронта и если вы к нему привяжитесь - ваш скрипт очень скоро перестанет работать.// @run-at document-start
function addCss(css, root = window) {
const style = root.document.createElement('style');
style.innerHTML = css;
(root.document.head || root.document.documentElement).append(style);
return style;
}
const css = `
[class^="chat__root__"] {
dislpay: none !important;
}
`;
addCss(css);// @run-at document-start
const css = `
[class^="chat__root__"] {
dislpay: none !important;
}
`;
// отлавливаем загрузку фреймов
new MutationObserver(() => {
document.querySelectorAll('iframe:not([us-processed]').forEach((iframe) => {
if (isAccessibleFrame(iframe)) {
// добавляем наш css
addCss(css, iframe.contentWindow);
// на случай если содержимое фрейма перепишут позднее
iframe.addEventListener('load', () => addCss(css, iframe.contentWindow));
}
// помечаем что обработали этот фрем, чтоб не повторять
iframe.setAttribute('us-processed', true);
});
}).observe(document, {childList: true, subtree: true});
// проверяем что содержимое фрейма доступно
function isAccessibleFrame(iframe) {
try {
iframe.contentWindow.test
return true
} catch (e) {
return false
}
}input у тебя получают одинаковый id и оба label одинаковый for. Поведение браузера при клике на label в таком случае не определено, но на практике это значит, что клик идёт всегда первому input.<label class="form-check-label">
<input
type="checkbox"
role="switch"
v-model="methodId"
:value="method.id"
class="form-check-input"
/>
{{ method.name_method }}
</label><input
:id="`input-${method.id}`"
type="checkbox" role="switch"
v-model="methodId"
:value="method.id"
class="form-check-input"
/>
<label :for="`input-${method.id}`" class="form-check-label">
{{ method.name_method }}
</label>