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 Commented 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
    Commented 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 Commented el 7 abr. 2020 a las 17:36
  • tarima.trabajo == al filtro no anda? no filtra o tira error...
    – gbianchi
    Commented 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
    Commented 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
    Commented 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
    – user128299
    Commented el 7 abr. 2020 a las 19:23

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.