prettier - это одно, eslint - это другое, если у тебя prettier подключается через eslint, то настройки для него указываются скопом, условно так:rules: {
'prettier/prettier': ['warn', {
semi: false,
...
singleQuote: true,
vueIndentScriptAndStyle: true,
arrowParens: 'avoid',
trailingComma: 'none',
quoteProps: 'consistent',
}],const options = computed(() => {
if (props.secondType)
return props.secondTypeItems.map(({ id, value}) => ({
label: value,
value: id
}));
if (props.thirdType)
return props.thirdTypeEvents.map(({ desc, name }) => ({
label: name,
value: desc
}));
// ...
return [];
});<el-select
v-model="modelText"
placeholder="Выберите предмет"
@change="changeVal"
>
<el-option
v-for="{ label, value} in options"
:key="value"
:label="label"
:value="value"
>
{{ label }}
</el-option>
</el-select>import { computed, ref } from "vue";<Input type="number" :value="count" @change="changeCount"/>Input в change возвращает не значение, а event, тут хз сам смотри.
axios.post('http://localhost:5000/api/create-post', () => {
body: data
})axios принимает параметром объект, а не функцию возвращающую объект.axios.post вообще сразу принимает body: axios.post('http://localhost:5000/api/create-post', data)() => {
body: data
}() => { // начало блока кода
// метка body указывающий на висящую в воздухе переменную data
body: data
// никакого возврата из функции
} // конец блока кода() => ({
body: data
})// версия с рантайм компилятором шаблонов
import { createApp } from 'vue/dist/vue.esm-bundler.js';
function renderVueComponent(template, data) {
const div = document.createElement('div');
createApp({
template,
data: () => data
}).mount(div);
return div.innerHTML;
}route?route у тебя - это текущий роут vue-рутера, тогда ошибка у тебя скорее всего выглядит как-то так:TS7053: Element implicitly has an 'any' type because expression of type 'RouteRecordName' can't be used to index type '{ first: string; second: string; }'. No index signature with a parameter of type 'string' was found on type '{ first: string; second: string; }'.
pages есть ключи типа 'first' | 'second' | ..., но нет index signature типа string, т.е. не указано, что ключом может быть любая строка, а не только конкретные'first' | 'second' | .... route.name же после проверки на пустоту имеет тип string | symbol. Ты не можешь у объекта с чётко ограниченным набором ключей брать значение по произвольному строковому/символьному.pages позволяющий рандомные ключи, например const pages: Record<PropertyKey, string> = {
first: 'Первая',
second: 'Вторая',
...
}... = pages[route.name as keyof typeof pages] name в route всегда будет одним из ключей pages. Уверены же?..export enum ERoutes {
FIRST = 'first',
SECOND = 'second'
}
const routes = [
{
name: ERoutes.FIRST,
...
},
{
name: ERoutes.SECOND,
...
},
...
]const pages: Record<ERoutes, string> = {
[ERoutes.FIRST]: 'Первая',
[ERoutes.SECOND]: 'Вторая',
...
}
... = pages[route.name as ERoutes]const routes = [
{
name: 'first',
...
},
{
name: 'second',
...
},
...
] as const satisfies ReadonlyArray<ReadonlyRouteRecordRaw>;
type ReadonlyRouteRecordRaw = Omit<RouteRecordRaw, 'children'> & {
children?: ReadonlyArray<ReadonlyRouteRecordRaw>;
};
type ExtractNames<Route> = Route extends { name: infer Name } ? Name : never;
type FlattenChildren<Route> = Route extends { children: ReadonlyArray<infer Children> }
? FlattenChildren<Children> | Route
: Route;
// с помощью магии ts вытаскиваем в тип RouteNames все заданные у нас имена маршрутов
export type RouteNames = ExtractNames<FlattenChildren<typeof routes[number]>>;
// с помощью магии же прокидывем их прямо в декларацию vue-router
declare module 'vue-router' {
export interface RouteLocationNormalizedLoaded {
name: RouteNames | null | undefined;
}
}satisfies - новая фича ts 4.9, в предыдущих версиях того же можно добиться сделав обёртку вида:const narrowRoutesTypeWrapper = <T extends ReadonlyArray<ReadonlyRouteRecordRaw>>(routes: T) => routes;
const routes = narrowRoutesTypeWrapper([ ... ] as const);const pages: Record<RouteNames, string> = {
first: 'Первая',
second: 'Вторая',
...
}о какой рендер функции идет речь?
<template>.(под капотом <template> компилируется в render-функцию)setup, можно класть в свойство render.script setup, можно сделать так:<template>
<div>
<render/>
</div>
</template>
<script setup lang="ts">
import { h, useSlots } from 'vue'
const slots = useSlots();
const render = () => {
return h('div', slots.default());
};
</script>export default defineComponent({
name: 'CounterButton',
props: {
count: {
type: Number,
default: 0
}
},
template: `<button type="button" @click="counter++">{{counter}}</button>`,
emits: ['update:count'],
setup(props, context) {
const innerCounter = ref(props.count);
watch(() => props.count, (value) => innerCounter.value = value);
return {
counter: computed({
get: () => innerCounter.value,
set: (value) => context.emit('update:count', innerCounter.value = value)
})
}
}
})(this.$refs.text as HTMLInputElement).focus();
v-model. У тебя сейчас должна быть полна консоль ворнингов.v-model на :value и @input="...." и работаешь с этим. Имя файла лежит в $event.target.files[0].name если что.
store пока они остаются на экране.)onUnmounted компонента.
receivedData может быть фиксированное количество записей фиксированных размеров, то условно как-то так:<div v-if="loading">
<div v-for="foo in 10" class="fixed-size loading"></div>
Loading
</div>
<div v-else>
<div v-for="foo in receivedData.foo" class="fixed-size">{{ foo }}</div>
{{ receivedData.bar }}
</div>const products = {
value: false
};
console.log(products)
console.log(products.value)
products.value = true;ref в данном случае никакой.ref.value ты уже получил текущее значение, если оно изменилось позже, то ты об этом никак не узнаешь, не поучив снова ref.value. Собсно потому и нужно это уродское .value, т.к. в js (пока?) нет нативных ref-ссылок приходится везде тащить объект-обёртку.