3

necesito saber como listar el contenido de values que se se encuentra en el componente 'data' en modo de lista via html pero no sé como, viendo documentación pensaba que era así:

<template>
  <h1>Tool list component</h1>
  
  <ul id ="tool-list">
    <li v-for="value in values">
      {{ value.id }}
    </li>
  </ul>

  <button v-on:click="toggleActive">Mostrar/ocultar</button>
</template>

<script>
export default {
  name:"tool-list",
  props: {
    numElements:Number,
    active: {
      type: Boolean
    },
  }, 
  data () {
    count: 6;
    values: [
      {id:1, name:"A1"},
      {id:2, name:"A2"},
      {id:3, name:"A3"},
    ];
  },

  methods: {
    countElements: function(){
      let sumElements= this.values.length;
      console.log (sumElements);
    },

    toggleActive: function(){
      this.active;
      console.log(this.active);
    }
  }
};

y por otro sabeis como sería la manera correcta de cambiar el valor del booleano active, lo he intentado en la función toggleActive pero me imprime siempre 'false'

2
  • 1
    this.active; no hace absolutametne nada... solo es la variable.. te falto cambiar el valor...
    – gbianchi
    el 5 abr. a las 19:43
  • Mira Cómo preguntar para que tu pregunta sea mejor recibida. También, aprovecha y haz el recorrido de bienvenida para entender mejor cómo funcionamos y de paso obtener tu primera medalla!
    – gbianchi
    el 5 abr. a las 19:43

2 respuestas 2

6

Data es donde se almacena y se gestiona la información que será usada en el template del componente pero no es el componente.

Según su código hay error de sintaxis, ya que data debe retornar un objeto:

data () { 
    values: [
        {id:1, name:"A1"},
        {id:2, name:"A2"},
        {id:3, name:"A3"},
    ];
}

✔️

 data() {
    return {
      values: [
        { id: 1, name: "A1" },
        { id: 2, name: "A2" },
        { id: 3, name: "A3" },
      ],
    };
  }

// o también: data: () => ({ values: [etc..] }) 

Ahora, al renderizar en vue 2 debe envolverse el html:

<template>
  <div> //Envoltura
    <ul id="tool-list">
       //Importante usar :key="" para la diferenciación de elementos.
      <li v-for="({id}, i) in values" :key="i">
        {{ id }}
      </li>
    </ul>
  </div>
</template>
   
0
0

toggleActive: function(){
  this.active = true;
  console.log(this.active);
}

1
  • Hola Xavier, bienvenido, gracias por tu colaboración, las respuesta que son solo código, son consideradas de baja calidad, te sugiero que edites la tuya, y expliques de que forma resuelve el problema planteado, así evitarás que sea cerrada y/o recibir votos negativos, ver como responder, aprovecha y haz el recorrido de Bienvenida para entender mejor cómo funcionamos y de paso obtener una medalla!. el 15 abr. a las 11:06

Tu Respuesta

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

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