O meu problema é o seguinte, eu tenho duas caixas de opções separadas, onde a lista da primeira caixa é carregada através de um json
.
E eu preciso carregar a segunda caixa de opções dependendo do valor selecionado na primeira caixa, sendo que o conteúdo das duas caixas vem do mesmo json
.
A primeira caixa é montada da seguinte maneira:
<div class="wrapper-radio" v-for="item in modalidades">
<input type="radio" name="slcModalidad" v-bind:id="'slcModalidad' + item.id">
<label v-bind:for="'slcModalidad'+item.id" class="slc-text">
{{item.nome}}
</label>
</div>
Até aí tudo bem, porém na segunda caixa além de não conseguir criar a condição, eu não consigo chamar os rubros dentro de outro v-for.
<div class="wrapper-radio" v-for="item in modalidades">
<input type="radio" name="slcRubro" id="slcRubro1">
<label for="slcRubro1" class="slc-text">
{{item.rubro.rubroNome}}
</label>
</div>
Esse é o json que está sendo usado:
{
"modalidades": [{
"id": 0,
"nome": "Venta presencial y/o mostrador",
"rubros": [{
"id": 0,
"rubroNome": "Accesorios, servicios y repuestos de automotor"
},
{
"id": 1,
"rubroNome": "Agencia de turismo"
}
]
},
{
"id": 1,
"nome": "Venta Telefónica",
"rubros": [{
"id": 0,
"rubroNome": "teste1"
},
{
"id": 1,
"rubroNome": "teste2"
}
]
},
{
"id": 2,
"nome": "E-Commerce",
"rubros": [{
"id": 0,
"rubroNome": "teste1"
},
{
"id": 1,
"rubroNome": "teste2"
}
]
},
{
"id": 3,
"nome": "Débito Automático",
"rubros": [{
"id": 0,
"rubroNome": "teste1"
},
{
"id": 1,
"rubroNome": "teste2"
}
]
},
{
"id": 4,
"nome": "Suscripciones",
"rubros": [{
"id": 0,
"rubroNome": "teste1"
},
{
"id": 1,
"rubroNome": "teste2"
}
]
}
]
}
Eu deveria fazer um v-if
antes do segundo v-for
?