Я использовал механизм предоставления/внедрения для передачи данных от родителя к внукам, но в одном из моих компонентов мне нужно обработать данные перед их отправкой в шаблон.
Так что я:
export default defineComponent({
name: 'MrComponent',
inject: ["mydata"],
computed: {
processedData() {
const mydata = this.mydata;
return mydata + 1; // Some handling of the data here
}
}
})
Но я получаю следующую ошибку:
[vue-cli-service] TS2339: Property 'mydata' does not exist on type 'CreateComponentPublicInstance<{ [x: string & `on${string}`]: ((...args: any[]) => any) | undefined; } | { [x: string & `on${string}`]: ((...args: never) => any) | undefined; }, { chartOptions: { responsive: boolean; maintainAspectRatio: boolean; cutout: string; borderWidth: number; }; }, ... 15 more ..., {}>'.
[vue-cli-service] Property 'mydata' does not exist on type '{ $: ComponentInternalInstance; $data: {}; $props: { [x: string & `on${string}`]: ((...args: any[]) => any) | undefined; } | { [x: string & `on${string}`]: ((...args: never) => any) | undefined; }; ... 10 more ...; $watch(source: string | Function, cb: Function, options?: WatchOptions<...> | undefined): WatchStopHan...'.
[vue-cli-service] 41 | computed: {
[vue-cli-service] 42 | chartData() {
[vue-cli-service] > 43 | const mydata = this.mydata;
[vue-cli-service] | ^^^^^^^^
[vue-cli-service] 44 | }
[vue-cli-service] 45 | }
[vue-cli-service] 46 | })
Если я получаю доступ к mydata в шаблоне, это работает:
<template>
{{ mydata }}
</template>
Но мне нужно сделать некоторые другие операции с моими данными, прежде чем отображать их. Как правильно это сделать?
Спасибо.
🤔 А знаете ли вы, что...
JavaScript позволяет создавать динамические и интерактивные веб-приложения.
Мне это кажется ошибкой Vue, так как реквизит должен быть обнаружен автоматически из опции inject (заполненной vuejs/core#5931), но есть пара обходных путей...
defineComponentЕсли у вашего компонента нет props, вы можете «подделать» mydata prop, указав его в аргументе первого типа defineComponent():
export default defineComponent<{ mydata: number }>({
inject: ['mydata'],
computed: {
processedData() {
// `this.mydata` is number
}
}
})
Однако этот обходной путь ненадежен, поскольку он ломает типы, как только вы добавляете опцию props.
Переключите соответствующие части кода на Composition API (например, inject() и computed()):
import { defineComponent, inject, computed } from 'vue'
export default defineComponent({
setup() {
const mydata = inject('mydata') as number
const processedData = computed(() => {
return mydata + 1
})
return {
processedData
}
}
})
Вы ищете Типы утилит — ComponentCustomProperties?
declare module 'vue' {
interface ComponentCustomProperties {
fastdata: {
user: {
nome: string,
tel: string,
pts: number,
nivel: number,
proximo_nivel: number,
tot_kg: number,
coleta: Array<any>,
},
noticias: Array<any>,
},
}
}