Because my component does not render (Vuejs)

Question

Because my component does not render (Vuejs)

Navigation

#1 by (1 votes)

0

My component must render a table with data at the press of a button, but it does not appear even though the console shows me a Array with values

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;
    });
  } ,
});

html vue.js

asked by chubbyRick 19.04.2018 в 08:46

source

1 answer

Change the style of TABLES mysql html ngfor prints messy

score 1 · Answer 1

First , where you put

render = true;

should be

this.render = true;

Otherwise you are not changing the property within data .

Second , the loop

if(typeof this.renglones == 'undefined'){
  ...
}

It is never fulfilled because lines are defined in hard as an empty array.

Third , when you listen to the event recive-opcion (it should be receive-option ) add an element to this.renglones but do not change the value of this.render . It should be:

Event.listen('recive-opcion',function(opcion){
  this.renglones.push({calificacion:1,opcion: opcion,id:this.nextID});
  console.log(this.renglones);
  this.nextID+=1;
  this.render = true;
});

However, as a suggestion , you do not really need to explicitly modify the render property but you could declare it as a computed property:

data() {
  return { 
    renglones: [],
    nextID : 0e
  };
},
computed: {
  render: function () {
    return this.renglones.length > 0;
  }
}

So the render value changes according to the number of rows.