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.