2

Tengo la siguiente vista la cual deberia de funcionar el filtro con una propiedad computada pero no logro que me funcione me marca el siguiente error

vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in render: "TypeError: tarima.trabajo is not a function"

La vista es la siguiente:

<template>
      <input type="text" v-model="filtrarTarima">
    <div v-for="(tarima, id) in filtrar" :key="id">
      {{ tarima.tarima}}
    </div>
</template>
<script>
export default {
data() {
return {
filtrarTarima: '',
      tarimas: [
        {
          id: 1,
          tarima: 19347,
          trabajo: 195288,
          parte: "A006287",
          cantidad: 237,
          maquina: "MINILINE 618",
          ubicacion: "ALM05"
        },
        {
          id: 2,
          tarima: 19348,
          trabajo: 195289,
          parte: "A006288",
          cantidad: 236,
          maquina: "MINILINE 618",
          ubicacion: "ALM05"
        }
      ],
}
},
computed: { 
     filtrar: function() {
      return this.tarimas.filter((tarima) => tarima.trabajo.includes(this.filtrarTarima));
    }
}
}
</script>

Pero el filtro no funciona, me podrian ayudar por favor

5
  • es tarima por que estoy iterando el 7 abr. 2020 a las 17:33
  • si si ahi lo vi.. por eso lo borre.. pero includes se usa con array y trabajo es un dato simple.. o estoy confundido?
    – gbianchi
    el 7 abr. 2020 a las 17:33
  • he probado sin el includes, no tengo idea solo lo vi en un tutorial pero con o sin el includes no logro que funcione el 7 abr. 2020 a las 17:36
  • tarima.trabajo == al filtro no anda? no filtra o tira error...
    – gbianchi
    el 7 abr. 2020 a las 17:37
  • includes es un método que existe en tipos de datos que son strings y arrays, en tu caso es un número. Por eso da error.
    – hawks
    el 7 abr. 2020 a las 18:03

2 respuestas 2

1

Como te dijeron, no existe tal cosa como Number.prototype.includes. Se maneja casteando a String:

String(tarima.trabajo).includes(...)

@gbianchi fíjate que el input permite filtrar. Si tienes muchas tarimas esto sí es útil

window.onload = () => {
  new Vue({
    el: '#app',
    data() {
      return {
        filtrarTarima: '',
        tarimas: [
          {id:1, tarima: 19347,trabajo: 195288},
          {id: 2, tarima: 19348,trabajo: 195289}
        ],
      }
    },
    computed: {
      filtrar: function() {
        return this.tarimas.filter(
           tarima => String(tarima.trabajo)
                        .includes(this.filtrarTarima)
        );
      }
    }
  });

};
#app {
padding:0.5em;
}
#app > div {
 margin:0.2em;
}
#app input {
 border-radius:3px;
 margin:  0.2em 0;
 padding:0.4em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <input type="text" v-model="filtrarTarima">
  <div v-for="(tarima, id) in filtrar" :key="id">
    {{ tarima.tarima}}
  </div>
</div>

Te recomiendo que las propiedades computadas describan mejor lo que significan (e.g. 'tarimasFiltradas').

Un verbo como filter es más intuitivo que sea un método. Esto es sólo un comentario

1

Estás usando el método includes() el cual va a:

Buscar si un elemento existe un una matriz, de ser así regresa true y en caso contrario retorna false

Para este caso algunas de las claves de tus objetos no almacenan cadenas de textos, por lo tanto los valores numéricos no son iterables.

Por ejemplo:

let numero = 12345
console.log(numero[1])

Da como resultado:

UNDEFINED

Mientras que si declaras ese mismo valor numérico entre comillas de esta forma:

let numero = "12345"
console.log(numero[1])

Da como resultado:

"2"

Entonces pudieras tener como opciones:

USA OTRA CLAVE PARA FILTRAR

Puedes tomar cualquier clave que almacene un string para filtrar así:

filtrar() {
          return this.tarimas.filter(tarima => tarima.ubicacion.includes(this.filtrarTarima))
}

CAMBIA EL VALOR ORIGINAL

Es decir aquellas claves que tienen valores que originalmente son numéricos, puedes modificarlos al colocarlos entre comillas y de esta forma volverlos iterables; de modo que el método includes() pueda llevar a cabo su trabajo sobre dicho elemento.

incluso con que el valor asociado a la clave que originalmente esta declarado como número quede entre comillas, no importa si el argumento pasado al método includes() llega con su formato original igual funcionará:

    let valores = [
      {
        id: "1",
        name: "one"
      },
      {
        id: "2",
        name: "two"
      }
    ]
    
    let resultado = valores.filter(elemento => elemento.id.includes(1))
    
    console.log(resultado)

REFERENCIAS

2
  • no entiendo porque tiene que usar includes y no simplemente comparar los valores.. por lo que se ve, va siempre al mismo campo...
    – gbianchi
    el 7 abr. 2020 a las 19:22
  • @gbianchi tienes razón solo traté de responder al respecto sin embargo es cierto con comparar debería alcanzar
    – BetaM
    el 7 abr. 2020 a las 19:23

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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