1

** Sugerir un mejor titulo si es necesario ** Estoy trabajando en Vue, quiero lograr mostrar un contenido, solo si este tiene el mismo valor que un array

Tengo dos arrays, uno llamado "typesArticle" y otro array llamado articles con varios objetos, de la siguiente forma:

typesArticle: ['Handguns', 'Assault Rifles', 'Sub-Fusil', 'Snipers', 'Shotguns'],
        articles: [{
                name: 'AEK-971',
                type: 'Assault Rifles',
                typeAmmon: 5.56,
                firerate: 900
            },
            {
                name: 'MP5',
                type: 'Sub-Fusil',
                typeAmmon: 9,
                firerate: 700
            }, {
                name: 'Glock 18C',
                type: 'Handguns',
                typeAmmon: 9,
                firerate: 1100
            }, {
                name: 'Barret .50',
                type: 'Snipers',
                typeAmmon: .50,
                firerate: 'Semi-Automatico'
            }, {
                name: 'Saiga 12K',
                type: 'Shotguns',
                typeAmmon: .12,
                firerate: 'Semi-automatico'
            }
        ]

En mi html tengo de esta forma una estructura:

<h2>Assault Rifles</h2>
    <p>{{Solo Rifles}}</p>
 <br>
<h2>Handguns</h2>
    <p>{{Solo pistolas}}</p>

Lo que quiero lograr, realizar una condicion supongo que debe lograrse perfectamente desde la directiva v-if Que lo que debe hacer, es recibir cada articulo y verificar que la propiedad type del objeto se encuentre en el array de type, y asi imprimirlo el nombre del articulo en su respectiva seccion o grupo

0

2 respuestas 2

1

La función filterArticles() toma al array typesArticle y le aplica un reduce guardando en un objeto cada item del array typesArticle como una propiedad del objeto filteredArticles, cada propiedad contiene un array dependiendo de la función filter aplicada en el array articles donde aplica el filtro que si el actual item de typesArticle es igual a la propiedad type de cada objeto del array articles entonces filtra un array con la coincidencia mencionada.

Luego en el template se itera el objeto filteredArticles tomando sus keys que están representadas como propiedades de este objeto y por cada objeto(que por valor tienen un array de objetos filtrados) se vuelve a iterar este array de objetos indicando su name & type.

Vue.config.devtools = false
Vue.config.productionTip = false
new Vue({
  el: "#app",
  data: {
    typesArticle: [
      "Handguns",
      "Assault Rifles",
      "Sub-Fusil",
      "Snipers",
      "Shotguns"
    ],
    articles: [
      {
        name: "AEK-971",
        type: "Assault Rifles",
        typeAmmon: 5.56,
        firerate: 900
      },
      {
        name: "MP5",
        type: "Sub-Fusil",
        typeAmmon: 9,
        firerate: 700
      },
      {
        name: "Glock 18C",
        type: "Handguns",
        typeAmmon: 9,
        firerate: 1100
      },
      {
        name: "Barret .50",
        type: "Snipers",
        typeAmmon: 0.5,
        firerate: "Semi-Automatico"
      },
      {
        name: "Saiga 12K",
        type: "Shotguns",
        typeAmmon: 0.12,
        firerate: "Semi-automatico"
      }      
    ],
    filteredArticles: {}
  },
  mounted() {
    this.filterArticles();
  },
  methods: {
    filterArticles() {
      this.filteredArticles = this.typesArticle.reduce((acc, item) => {
        acc[item] = this.articles.filter(a => a.type === item);
        return acc;
      }, {});
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
    <div v-for="(article, key) in filteredArticles" :key="key">
        <h2>{{ key }}</h2>
        <div v-for="(a, index) in article" :key="index">
          <p>name: {{ a.name }}</p>
          <p>type: {{ a.type }}</p>
        </div>
    </div>
    <pre style="background-color: #efefef">
      filteredArticles: {{ filteredArticles }}
    </pre>
</div>

0
1
  • Aunque propones hacerlo a través de la directiva v-if, propongo mejor dejar el filtrado de datos a través de una Propiedad calculada
  • Al pasar la lógica de programación a una computed property dejamos ligera la vista
  • Recorremos los elementos de articles para después con un condicional para verificar si el objeto ele en la propiedad type es igual a una posición específica del array indexado typesArticle
  • A falta de una mejor opción, le indico en el condicional que evalúe si ele.type es igual a la posición 0 o 1 del array typesArticle según cada caso solicitado
  • En la vista solo itero los resultados devueltos por cada una de las propiedades computadas con un v-for e imprimiendo la propiedad nombre

Código

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>Filtro</title>
    </head>
    <body>
    <div id="app">
      Armas de tipo rifles
      <ul>
         <li v-for="article in filterRifles">{{ article.name }}</li>
      </ul>
      Armas de tipo pistola
      <ul>
        <li v-for="article in filterHandgun">{{ article.name }}</li>
      </ul>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        let app = new Vue({
          el: `#app`,
          data:{
                typesArticle: ['Handguns', 'Assault Rifles', 'Sub-Fusil', 'Snipers', 'Shotguns'],
                articles: [{
                        name: 'AEK-971',
                        type: 'Assault Rifles',
                        typeAmmon: 5.56,
                        firerate: 900
                    },
                    {
                        name: 'MP5',
                        type: 'Sub-Fusil',
                        typeAmmon: 9,
                        firerate: 700
                    }, {
                        name: 'Glock 18C',
                        type: 'Handguns',
                        typeAmmon: 9,
                        firerate: 1100
                    }, {
                        name: 'Barret .50',
                        type: 'Snipers',
                        typeAmmon: .50,
                        firerate: 'Semi-Automatico'
                    }, {
                        name: 'Saiga 12K',
                        type: 'Shotguns',
                        typeAmmon: .12,
                        firerate: 'Semi-automatico'
                    }
            ]
          },
          computed: {
            filterRifles() {
              return this.articles.filter(ele => {
                if(ele.type === this.typesArticle[1]){
                  return ele
                }
              })
            },
            filterHandgun() {
              return this.articles.filter(ele2 => {
                if(ele2.type === this.typesArticle[0]){
                  return ele2
                }
              })
            }
          }
        })
    </script>
    </body>
    </html>

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.