1

He encontrado muy poca información útil tanto en inglés y en español sobre cómo poder asignarle el valor de checked de una opción de un v-radio que se construye dinámicamente.

Explico qué tengo y qué necesito.

Tengo la siguiente lista de objetos que guardo en una variable llamada preguntas:

[
    {
        id : 1,
        titulo_pregunta : 'Pregunta uno'
        reactivos : {
            reactivo_contestado : 1,
            preguntas : [
                {
                    id : 1,
                    titulo_reactivo : 'Opción uno',
                },
                {
                    id : 2,
                    titulo_reactivo : 'Opción dos',
                },
            ]
        }
    },
    {
        id : 2,
        titulo_pregunta : 'Pregunta dos'
        reactivos : {
            reactivo_contestado : 4,
            preguntas : [
                {
                    id : 3,
                    titulo_reactivo : 'Opción uno',
                },
                {
                    id : 4,
                    titulo_reactivo : 'Opción dos',
                },
            ]
        }
    },
]

La cual tomo para construir un examen usando el siguiente código:

<div v-for="(pregunta, index) in preguntas">
    <h1>{{ pregunta.titulo_pregunta }}</h1>
    <v-radio-group>
        <v-radio 
        v-for="(reactivo in pregunta.reactivos.preguntas)" 
        :label="reactivo.titulo_reactivo"
        :value="reactivo.id">           
        </v-radio>
    </v-radio-group>
</div>

Entonces, dado el anterior código, lo que necesito hacer es seleccionar con un checked el v-radio donde sean iguales el id de la pregunta y el reactivo_contestado.

Es decir, por ejemplo, el primer elemento de la lista de preguntas tiene sus reactivos y además tiene una propiedad llamada reactivo_contestado con valor de 1. Lo que quiero hacer es comparar en cada iteración con una condición de que si ( reactivo_contestado == reactivo.id ) (en este caso sería 1 == 1 y daría true) le ponga un checked y se dibuje seleccionado ese elemento del v-radio, sin embargo, Vuetify no reconoce esta instrucción, por lo que nace de ahí mi duda de cómo hacerlo e indicarle a Vuetify que necesito que ese v-radio esté checado dada la condición anterior.

Gracias.

2 respuestas 2

2

v-radio-group maneja que radio debe ser chequeado, deberías definirlo en el value de v-radio-group

<div v-for="(pregunta, index) in preguntas">
    <h1>{{ pregunta.titulo_pregunta }}</h1>
    <v-radio-group
     :value="pregunta.reactivos.reactivo_contestado">
        <v-radio 
         v-for="(reactivo in pregunta.reactivos.preguntas)" 
         :label="reactivo.titulo_reactivo"
         :value="reactivo.id">           
        </v-radio>
    </v-radio-group>
</div>

De este modo v-radio-group va a chequear al v-radio que tenga como value el mismo value que tiene él. Es decir, hace automáticamente la lógica que vos estás buscando:

si ( reactivo_contestado == reactivo.id ) (en este caso sería 1 == 1 y daría true) le ponga un checked

También le podrías agregar al v-radio-group un readonly si no querés que el usuario interactúe o un v-model en caso contrario.

1
  • Muchas gracias, excelente, me sirvió, era tan sencillo como pasarlo en el v-group-radio y no lo había visto! Qué tonto me siento, jaja! Gracias!!! Commented el 27 nov. 2020 a las 16:45
1

Puedes considerar la siguiente estructura para listar tu coleccion

<div v-for="(n, index) in preguntas" :key="index">
   <v-radio-group v-model="preguntas[index].title" :mandatory="false">
     <v-radio label="preguntas[index].title" :value="1" color="blue"></v-radio>
   </v-radio-group>
</div>

debes usar v-model de v-radio-group segun a esa variable de tus objetos debe ser marcado o no.

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.