Editar: Esto es para Vue 2.X
Estoy creando un solo componente Vue.js cuyo propósito es crear formularios "personalizados".
Este componente es básicamente un formulario en sí mismo con múltiples campos de entrada. En este formulario, puede optar por agregar preguntas, definir el tipo de entrada, etc. Todos los datos se almacenan en una matriz, donde los datos representan un formulario.
En el futuro, esta serie de preguntas se puede analizar y utilizar para mostrar un formulario. Esto permite a los usuarios crear sus propios formularios sin codificarlos.
El problema:
Como se mencionó, todos los datos que quiero almacenar son una serie de preguntas, donde cada pregunta está representada por un objeto. Por ejemplo [ { 'question_name': "How are you", 'input_type': "text" }, ... ] etc etc.
Sin embargo, debido a que este formulario no es un campo de entrada en sí mismo y, en cambio, los datos se componen de muchas entradas más pequeñas, no puedo hacer un modelo v en mi componente de formulario fácilmente.
Por lo tanto, no hay forma de hacer que todos los datos del formulario sean "reactivos" desde el componente principal, de la misma manera que los campos de entrada son reactivos con la variable v-model a la que están vinculados.
Por ejemplo, en mi Parent.vue podría querer esto
<CustomFormComponent v-model="formData" /> # los datos del formulario son la matriz que mencioné
y ser capaz de interactuar con los "formData" del padre directamente, siendo el CustomFormComponent reactivo a dichos cambios.
Una buena solución pero no la mejor:
Una forma, por supuesto, es agregar un método setter y getter a mi componente de formulario personalizado. Cuando necesito los datos para el envío, puedo llamar al captador. Cuando necesito agregar preguntas predeterminadas, puedo usar el setter.
¿Alguien sabe si lo que quiero hacer es posible?
No especifica la versión de VueJS que está ejecutando. Asumiré que es VueJS 2, que es el que más he usado, pero seguro que también se puede hacer con 3:
<template> <div id="app"> <p>My Form</p> <CustomForm v-model="questions" /> </div> </template> <script> import CustomForm from "./components/CustomForm"; export default { name: "App", data() { return { questions: [ { id: 1, label: "1", answer: "" }, { id: 2, label: "2", answer: "" }, { id: 3, label: "3", answer: "" }, { id: 4, label: "4", answer: "" }, { id: 5, label: "5", answer: "" }, ], }; }, components: { CustomForm, }, }; </script> Y luego CustomForm.vue :
<template> <form> <div v-for="question in value" :key="question.id"> <p>{{ question.label }}</p> <input :id="question.id" :value="question.answer" @input="(e) => (question.answer = e.target.value)" /> </div> </form> </template> <script> export default { name: "CustomForm", props: { value: Array, }, }; </script> Obviamente, podría cambiar esto para tener también otros tipos de elementos DOM, como select , checkbox ... Es un ejemplo simple.