Actualmente estoy trabajando en un proyecto de Vue 2 con TS usando estas bibliotecas para la configuración de componentes: vue-class-component y vue-property-decorator
Necesito crear un componente de formulario, pero tengo dificultades con el enlace de datos, porque cuando uso la opción data() para mi componente de formulario, se producen errores en el tiempo de compilación.
¿Hay alguna forma de vincular los datos de entrada sin usar la opción data()?
Los errores que obtengo:
ERROR in /path/to/components/folder/Form.vue
Property 'id' does not exist in type 'Form'.Para más contexto aquí está mi código:
@Component export default class Form extends Vue { //Bind form data data() { return { id: "", name: "", age: 0, amountA: 0, amountB: 0, capitalA: 0, capitalB: 0 } } onSubmit(e: any): void { e.preventDefault(); //Create new class object const newClass = { id: this.id, name: this.name, age: this.age, amountA: this.amountA, amountB: this.amountB, capitalA: this.capitalA, capitalB: this.capitalB } //Emit the class object to parent component this.$emit("add-class", newClass); this.$emit("update-total"); //Reset Form this.id = "" this.name = "" this.age = 0 this.amountA = 0 this.amountB = 0 this.capitalA = 0 this.capitalB = 0 }Y aquí está el error en mi consola: Error de consola
¿Alguien puede ayudarme a deshacerme de estos errores? ¡Gracias!
En los decoradores de componentes de la clase Vue, la función data() de la API de opciones se abstrae.
El decorador @Component es una función responsable de transpilar su código desde la sintaxis de Class API a la sintaxis de Options API.
Es decir, detrás de escena:
data() ,computedmethods .Así que simplemente declare los accesorios directamente en la instancia de la clase:
@Component export default class Form extends Vue { id = ""; name = ""; age = 0; amountA = 0; amountB = 0; capitalA = 0; capitalB = 0; // props declared above are reactive and you can now use them // in getters or methods }Vea el ejemplo en la página Resumen . Con más detalle, este comentario en particular:
// Las propiedades de clase serán datos de componentes
Advertencia: si recién está recogiendo Vue, tenga en cuenta que la sintaxis de los decoradores de clase de Vue está en una tendencia de uso a la baja y se esperan problemas con la compatibilidad de Vue 3 (y ya han comenzado a surgir). Eche un vistazo a las cuestiones abiertas en su repositorio.
En la misma nota, es posible que desee leer este comentario de Evan You 1 , ref. uso de los decoradores de componentes de la clase Vue:
Definitivamente ya no es una opción recomendada en los documentos oficiales o en las herramientas predeterminadas (mudanza pronto a Vite y vue-cli estará en modo de mantenimiento).
La desaprobación dependerá del uso real y de la intención de @ktsn 2 de seguir trabajando en el proyecto.
1 :: autor de Vue
2 :: mantenedor del paquete vue-class-component
Consejo personal: instalar @vue/composition-api en su proyecto Vue 2 y reescribir sus componentes en la sintaxis de la API de composición sería más beneficioso que escribir en la sintaxis de los decoradores de clase, tanto para usted como para el proyecto.
Al hacer esto, usted
Debido a que la sintaxis de los decoradores de clase está perdiendo popularidad, es posible que sea más difícil obtener compatibilidad con ella a medida que pasa el tiempo.
Si reescribir los componentes existentes en la API de composición no es una opción, al menos podría escribir nuevos componentes en esta sintaxis, ya que la sintaxis se puede adoptar de forma incremental, se puede usar junto con cualquier otra sintaxis válida de la API de Vue.