Mi componente debe renderizar una tabla con datos al presionar un botón, pero no aparece aunque la consola me muestra un Array
con valores
Vue.component('list-din',{
template:`<div>
<b-button @click="agrega">Agregar</b-button>
<b-list-group v-if="render != undefined">
<b-list-group-item v-for="(renglon, index) in this.renglones" v-bind:key="renglon.id"
v-bind:title="renglon.opcion"
v-on:remove="renglones.splice(index,1)" class="d-flex justify-content-between align-items-center"><tinymce-estatico>{{renglon.opcion}}</tinymce-estatico>
<b-badge variant="primary" pill>{{renglon.calificacion}}</b-badge>
</b-list-group-item>
</b-list-group>
</div>
`,
data() {
return{ renglones: [
],
nextID : 0,
render: false
};
},
methods:{
agrega(){
Event.fire('trae-opcion');}
},
created:function(){
if(typeof this.renglones == 'undefined'){
this.renglones = new Array();
this.nextID = 0;
this.renglones.push({calificacion:1,opcion: opcion,id:this.nextID});
render = true;
}Event.listen('recive-opcion',function(opcion){
console.log('chido');
this.renglones.push({calificacion:1,opcion: opcion,id:this.nextID});
console.log(this.renglones);
this.nextID+=1;
});
} ,
});