Tengo una plantilla de formulario principal y cada pregunta del formulario está dentro de un componente secundario, como este
<template> <question1 @display-answer-1="setAnswer1" /> <!-- other child components here... --> </template> <script> import Question1 from '...path...'; export default{ components: { Question1 }, data() { answer1: '' }, methods: { setAnswer1(answer1) { this.answer1 = answer1; } } };y mi componente hijo es así
<template> <input type="text" v-model="answer1"/> <div> <button type="button" @click="saveQ2" >Save </button> </div> </template> <script> export default { data() { return { answer1: '' }; }, methods: { saveQ2() { const answer1 = this.answer1; this.$emit('display-answer-1', answer1); } } }; Este código funciona, pero de esta manera me veo obligado a poner un botón cada vez que hay una pregunta para pasar datos del elemento secundario al elemento principal de la plantilla de formulario. ¿Existe una alternativa inteligente para no poner un botón save debajo de cada pregunta?
puede usar el evento de desenfoque cada vez que una entrada se desenfoca, activará el evento.
<template> <input @blur="saveQ2" type="text" v-model="answer1"/> </template> <script> export default { data() { return { answer1: '' }; }, methods: { saveQ2() { const answer1 = this.answer1; this.$emit('display-answer-1', answer1); } }};