5

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?

1 Resposta 1

3

Cria uma propriedade computed que guarda o valor da primeira escolha e muda o valor da segunda array.

Algo assim:

(demo aqui)

computed: {
    rubros() {
        const modalidade = this.modalidades[this.slcModalidad];
        return modalidade ? modalidade.rubros : [];
    }
},
data() {
    return {
        slcModalidad: null,
        "modalidades": [{
            // etc...

e depois no template:

<div class="wrapper-radio" v-for="(item, i) in modalidades">
    <input type="radio" name="slcModalidad" :value="i" v-bind:id="'slcModalidad' + item.id" v-model="slcModalidad">
    <label v-bind:for="'slcModalidad'+item.id" class="slc-text">
        {{item.nome}}
    </label>
</div>
<div class="wrapper-radio" v-for="(rubro, i) in rubros">
    <input type="radio" name="slcRubro" :id="'slcRubro1' + i">
    <label :for="'slcRubro' + i" class="slc-text">
        {{rubro.rubroNome}}
    </label>
</div>
3

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .