Filter array value in VUE

Asked

Viewed 335 times

1

I have the following array, which is a menu, I entered a search field at the beginning and would like that filtered case to show only items that contain certain text.

<script> 
      this.vue = new Vue({
        el:"#menu_principal",
        data : {  
          busca_menu : '',
          menu : [ { "categoria": "Agenda", "itens": [ { "nome": "Agenda"}, { "nome": "Novo Compromisso"} ]],

        },

        computed: {

          filteredMenu: function() {

               if(this.busca_menu == ''){
              return this.menu;
            } else {
              return this.menu.itens.nome.includes(this.busca_menu);
            }
          }

        },
        mounted(){
        }
      })
    </script>
vue.js

  • It was not very clear your question, and if possible put Html tbm!

  • Has there been any response?

1 answer

1

You needed to use the function filter from Javascript to filter the original list, follow an example of implementation

<template>
  <div class="hello">
    <input v-model="search" />
    <ul>
      <li v-for="(item, index) in filteredItems" :key="index">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      search: '',
      items: [{name: 'item 1'},{name: 'item 2'},{name: 'item 3'}]
    }
  },
  computed: {
    filteredItems() {
      return !this.search.length 
        ? this.items 
        : this.items.filter(item => item.name.toLowerCase().includes(this.search.toLowerCase().trim()))
    }
  }
};
</script>

https://codesandbox.io/s/6yv0jow86z

Browser other questions tagged vue.js

You are not signed in. Login or sign up in order to post.