0

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;
    });
  } ,
});
1
  • Hola chubbyRick, bienvenido a Stack Overflow en español. Por favor, lee el recorrido de bienvenida para aprender el funcionamiento básico del sitio. Lo más importante es haberlo intentado. Sobre tu intento nos contextualizas en los problemas concretos que tienes y sobre ello podemos ayudarte. Si no lo has intentado, investiga y prueba. Después has de editar la pregunta para añadir la información que falta según Cómo preguntar y ejemplo mínimo verificable. Un saludo.
    – Mulflar
    Commented el 19 abr. 2018 a las 6:53

1 respuesta 1

1

Primero, donde pones

render = true;

debiera ser

this.render = true;

De lo contrario no estás cambiando la propiedad dentro de data.

Segundo, el bucle

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

Nunca se cumple porque renglones está definido en duro como un array vacío.

Tercero, cuando escuchas el evento recive-opcion (debiera ser recibe-opcion) añades un elemento a this.renglones pero no cambias el valor de this.render. Debiera ser:

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

Sin embargo, como sugerencia, en realidad no necesitas modificar explícitamente la propiedad render sino que podrías declararla como una propiedad computed:

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

De manera que el valor de render cambie acorde a la cantidad de renglones.

1
  • Muchas gracias por tu respuesta, me ayudo a darme cuenta de mi verdaro error, mi componente nunca modifica el DOM luego de que se renderiza
    – chubbyRick
    Commented el 19 abr. 2018 a las 17:51

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.