1

Quiero poder extraer el largo del array. En javascript tengo entendido que se hace con .lenght, pero no se si en vue.js es diferente; ya que intento y no me funciona.

introducir la descripción de la imagen aquí

2
  • 3
    es exactamente igual.. dentro de los metodos de vue, se programa en js...
    – gbianchi
    Commented el 16 ago. 2018 a las 21:02
  • 1
    Si no funciona, podrias contarnos que error recibis? seguramente en la consola tira algun error. Lo que si veo es que estas pidiendo el tamaño de indice, y tu array se llama array?
    – gbianchi
    Commented el 16 ago. 2018 a las 21:05

3 respuestas 3

3

El problema es que estas intentando acceder a una propiedad que no tienes en tu caso dentro de data lo que tienes es array, por tanto para saber su largo debes decir:

return this.array.length;

Y no:

return this.indice.length;

Que es como lo tienes implementado hasta ahora, o simplemente cambia

data: {
  array: [/*Lo que va adentro*/]
}

Por:

data: {
  indice: [/*Lo que va adentro*/]
}

Y ya puedes acceder con this.indice.length

El comentario que puse dentro del arreglo es para que sepas que eso se mantiene solo debes llenarlo con tus valores.

0

Te dejo este ejemplo para darte una guia; te comentaré un par de cosas al respecto

  1. En la clave data tienes declarado un arreglo; todo esto al mismo nivel de la instancia de Vue que recién haz creado una vez que escribes new Vue({})
  2. Cuando intentas desde methods acceder a dicho valor debes hacerlo a través de this, para hacer referencia al contexto de la instancia de vue que tienes declarada
  3. Para acceder a la longitud o algún otro atributo del array debes hacer por medio de this.nombreArreglo donde de forma explicita y clara colocas el nombre del arreglo declarado arriba en data
  4. Para fines ilustrativos yo solo coloque que en el evento click del button, se ejecute el método contar() que a su vez me retorna la longitud del arreglo

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>JS Bin</title>
    </head>
    <body>
      <div id="app">
        <button  v-on:click="contar()">Contar</button>
      </div>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
      let app = new Vue({
      el: '#app',
      data:{
        objetos: ["uno", "dos", "tres"]
      },
      methods: {
        contar: function(){
          console.log(this.objetos.length)
        }
      }
    })
    </script>
    </body>
    </html>

Haciendo la aclaración que no es una tarea de VueJS si no una tarea de JavaScript en este caso

Aunque también es posible si la instancia de Vue la asignaste a una variable

En lugar de esto

this.arreglo.length

hacer esto

app.arreglo.length

Entiendiendo que app es la variable a la cual en mi ejemplo asigne la instancia de Vue

O bien dejarlo de este modo donde accedemos mediante la variable app a la instancia recién creada de VueJS

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div id="app">
    <button  @click="contar()">Contar</button>
  </div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
  let app = new Vue({
  el: '#app',
  data:{
    objetos: ["uno", "dos", "tres"]
  },
  methods: {
    contar(){
      console.log(app.objetos.length)
    }
  }
})
</script>
</body>
</html>

0

En mi caso estaba tratando de realizar una validación de comparación con

this.array.length == 0

Sin embargo, en mi caso, aunque debía funcionar este código, el tema era que mi arreglo estaba establecido en null, por lo que esa validación en mi caso puntual no funcionaba directamente. Primero debía asegurarme que no estuviera en null la variable del arreglo y luego sí proceder a validar el largo. Para este caso, mi solución fue validar en su lugar con undefined.

Ejemplo del caso puntual:

<template v-if="this.array != undefined">
...
</template>

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.