1

Estoy intentando crear un pequeño sistema de preguntas basadas solo en dos respuestas "SI" y "NO", para ello estoy usando VUE todo iba bien hasta que me topé con los radio inputs, ya que creé dos radio inputs para las respuestas, pero me genera problemas de duplicados y al realizar clic en el radio no hace el clic correcto.

Demo:

var questions = new Vue({
    el: '#main',
    data: {
    	chosenindex:0,
      questions :[
        {
          "id": 1,
          "question": "PRIMERA PARTE",
          "chosenanswer": null,
          "options": [
            {
              "id": 1,
              "answer": "Tiene sed?",
            },
            {
              "id": 2,
              "answer": "Tiene sueño?",
            }
          ]
        },
        {
          "id": 2,
          "question": "SEGUNDA PARTE",
          "chosenanswer": 0,
          "options": [
            {
              "id": 3,
              "answer": "Tiene hambre?",
            },
            {
              "id": 4,
              "answer": "Tiene cansancio?",
            }
          ]
        },
      ],
    },
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="main">
<template v-for="(question,qindex) in questions">
  <template v-if="chosenindex == qindex">
    <p>
    {{question.question}}
    </p>
    <template v-for="(option,oindex) in question.options" >
      {{option.answer}} <br>
       <input type="radio" :value="0" :name="question.id"
                v-model="question.chosenanswer" :key="option.id" /> NO
       <input type="radio" :value="1" :name="question.id"
                v-model="question.chosenanswer" :key="option.id" /> SI                             
       <br/>
    </template>
  </template>
</template>
<button type="button" v-if="chosenindex!=0" v-on:click="chosenindex--">Previous</button>
<button type="button" v-if="chosenindex<1" v-on:click="chosenindex++">Next</button>
</div>

Al final deseo sumar las respuestas de los questions por grupos, es decir :

PRIMERA PARTE = 2
SEGUNDA PARTE = 1

La suma se realiza con las respuestas SI = 1 NO = 0

FUNCIONANDO: https://jsfiddle.net/killerbo/09xukz4a/

2
  • No termino de entender cual es tu problema...
    – gbianchi
    el 25 may. 2020 a las 23:01
  • Hola gbianchi, el problema es con los radio inputs creados, no funcionan correctamente. saludos. el 25 may. 2020 a las 23:03

1 respuesta 1

2

El problema es que sólo tienes un campo chosenanswer para el objeto question, pero haces el binding de las dos opciones al mismo campo. Por eso "se duplica el click".

Cada objeto answer debería tener su propio chosenanswer con su binding a su respectivo <option>.

    {
      "id": 1,
      "question": "PRIMERA PARTE",
      "options": [
        {
          "id": 1,
          "answer": "Tiene sed?",
          "chosenanswer": null // Aquí el campo para esta answer
        },
        {
          "id": 2,
          "answer": "Tiene sueño?",
          "chosenanswer": null // Y aqui de nuevo
        }
      ]
    },
    {
      // ...
    }
];

En el HTML no haría falta nada más que hacer el binding al campo del option, no de question.

<template v-for="(option,oindex) in question.options" >
    {{option.answer}} <br>
    <input type="radio" :value="0" :name="question.id"
            v-model="option.chosenanswer" :key="option.id" /> NO
    <input type="radio" :value="1" :name="question.id"
            v-model="option.chosenanswer" :key="option.id" /> SI                             
    <br/>
</template>

EDIT: Sumar las respuestas.

En el caso del "Sí" es sencillo, sólo necesitamos sumar todos los chosenanswer, ya que el valor puede ser null, 0 ó 1. En el caso de null, también contará como un 0.
En el caso del "No" es un poco más complicado, porque tenemos que discernir los null de los 0, para evitar falso-positivo. Por ello, saco un poco de provecho de los type coercion de JavaScript.

methods: {
    check: function(e) {
      // De la primera pregunta
    const [ first ] = this.questions;
    const nSi = first.options.reduce((acc, curr) => acc + curr.chosenanswer, 0);
    const nNo = first.options.reduce((acc, curr) => {
        // Compruebo que sea 0 (y solo 0)
        const is0 = curr.chosenanswer === 0;
        // Convierto el bool a number
        // true -> 1; false -> 0
        return acc + +is0;
    }, 0);

    console.log(`SI: ${nSi}`);
    console.log(`NO: ${nNo}`);
  }
}

Algo que se me había olvidado comentar antes. Los radio button deberían tener key diferente. En caso de sacar la key de cada option, siempre se duplican. Por ello deberías quitar el atributo key.
Además, el atributo name debería estar ligado al option, no al question.

Así quedaría de nuevo el HTML

<template v-for="(option,oindex) in question.options" >
{{option.answer}} <br>
    <input type="radio" :value="0" :name="option.id"
            v-model="option.chosenanswer" /> NO
    <input type="radio" :value="1" :name="option.id"
            v-model="option.chosenanswer" /> SI                  
    <br/>
</template>

Espero que sirva.

1
  • Gracias, funciona, como puedo sumar esas respuestas cuando le doy clic en siguiente? el 25 may. 2020 a las 23:08

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.