Rendering Lists in VueJs

A demo of rendering lists in VueJs using the v-for directive - http://coligo.io

by Sergio Crisostomo

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script>
<div id="app">
    <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>
</div>

JavaScript

var vm = new Vue({
    el: '#app',
    computed: {
        rubros() {
            const modalidade = this.modalidades[this.slcModalidad];
            return modalidade ? modalidade.rubros : [];
        }
    },
    watch: {
        slcModalidad(val) {
            console.log(this.modalidades[val])
        }
    },
    data() {
        return {
            slcModalidad: null,
            "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"
                }]
            }]

        }
    }
});