Usé el mecanismo de proporcionar/inyectar para pasar datos de padres a nietos, pero en uno de mis componentes necesito manejar los datos antes de enviarlos a la plantilla.
Así que tengo:
export default defineComponent({ name: 'MrComponent', inject: ["mydata"], computed: { processedData() { const mydata = this.mydata; return mydata + 1; // Some handling of the data here } } })Pero me sale el siguiente error:
[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 | }) Si accedo a mydata en la plantilla, funciona:
<template> {{ mydata }} </template>Pero necesito hacer algunas otras operaciones con mis datos antes de mostrarlos. ¿Cuál es la forma correcta de hacerlo?
Gracias.
Esto me parece un error de Vue, ya que el accesorio debería detectarse automáticamente desde la opción de inject (archivado vuejs/core#5931 ), pero hay un par de soluciones...
defineComponent Si su componente no tiene props , podría "falsificar" un accesorio mydata especificándolo en el primer argumento de tipo de defineComponent() :
export default defineComponent<{ mydata: number }>({ inject: ['mydata'], computed: { processedData() { // `this.mydata` is number } } }) Sin embargo, esta solución es frágil ya que rompe los tipos tan pronto como agrega la opción de props .
Cambie las partes relevantes del código a la API de composición (es decir, inject() y 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 } } })¿Está buscando Tipos de utilidad - 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>, }, } }