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

Question

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

Navigation

#1 by (3 votes)

5

My problem is as follows, I have two separate checkboxes, where the list of the first box is loaded through a json .

And I need to load the second checkbox depending on the value selected in the first box, with the contents of the two boxes coming 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 besides not being able to create the condition, I can not call the items inside 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 json 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"
                }
            ]
        }
    ]
}

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

json vue.js

asked by anonymous 30.08.2017 / 19:25

1 answer

Riding an arena on canvas Timeout when using httr: POST ()

score 3 · Accepted Answer

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

Something like this:

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