Estoy creando una encuesta con Vue 2 y estoy tratando de crear y emitir la matriz de respuestas a un componente principal llamado Evaluación que se ve así: https://pastebin.com/rLEUh56a
Tengo un componente llamado QuestionItem.vue que es hijo de Evaluation y se ve así: https://pastebin.com/RFPgKs5Q
La matriz de respuestas debe ser algo como esto para poder enviarse a la API:
answers: [ { questionId: "6a9ad778-aacf-4e60-9610-37a767700b9f", questionOptionIds:[ "1bc35f6c-900a-4764-84ee-23531e46e638", ], answer: null }, { questionId: "d1c3f4f0-9525-4e6e-bb81-599d84b5cb02f", questionOptionIds:[], answer: "answered value" }, ] Donde, si el tipo de question.type es text , range , stars o faces , los identificadores de opción de questionOptionIds deben estar vacíos y la propiedad de answer debe ser el valor respondido, pero si el tipo de question.type es radio o check , la propiedad de respuesta debe ser nula y la propiedad questionOptionIds debe ser la opción de respuesta que eligió el usuario.
No estoy seguro de cómo puedo construir esta matriz a partir de todas las respuestas que se ingresan en el componente QuestionItem.vue.
¡Gracias por su tiempo, que tenga un buen día!
No puede usar v-model para sus respuestas en su componente QuestionItem de esa manera:
<QuestionItem v-for="(question, index) in questions" :key="index" :question="question" :index="questionIndex" v-model="answers" class="flex-none w-full" />v-model tomará su valor de entrada emitido por el niño y lo establecerá en respuestas, lo que no tiene sentido en este caso ya que las respuestas son una matriz de cada respuesta, en lugar de una respuesta singular.
Necesitará tener un controlador de eventos personalizado en su componente principal. Algo como esto:
// in Evaluation.vue methods answerChanged(answer) { // remove this answer if it's already in the array answers = answers.filter(a=>a.questionId != answer.questionId); // add the submitted answer answers.push(answer); }luego, en lugar de v-model, use un controlador de eventos:
<QuestionItem v-for="(question, index) in questions" :key="index" :question="question" :index="questionIndex" @input="answerChanged" //bind the event handler class="flex-none w-full" />por último, deberá agregar el questionId al valor que está emitiendo. Esta es una aproximación, es posible que deba adaptar esto para que se ajuste al formato exacto que está buscando:
watch: { questionValue(newValue) { // emit the value that we want for a single answer in our parent answers array this.$emit('input', { questionId: question.id, questionOptionIds:question.options, answer: newValue }) }, },