Vuejs: how to create a condition from one v-for to another

Question

My problem is the following, I have two separate options boxes, where the list of the first box is loaded through a json.

And I need to load the second box of options depending on the value selected in the first box, and the content of the two boxes comes from the same json.

The first box is mounted as follows:

<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>

So far so good, but in the second box not only can not create the condition, I can not call the red within another 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>

This is the json that is being used:

{
    "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"
                }
            ]
        }
    ]
}

I should make a v-if before the second v-for?

Answer 1

Creates a property computed that saves the value of the first choice and changes the value of the second array.

Something like that:

(demo here)

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

and then in the 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>