Vue.js - Search function for JSON Object

Question

I am new to Vue.js, and I want to add a search function for my site. The data is from an API Call and is displayed using vue.js too.

Display HTML Code:

<div class="row" v-for="items in data">
            <div class="col-lg-4 col-md-6" data-toggle="modal" data-target="#exampleModal" user="'items'" @click="sendInfo(items)">
                <a href="#" class="latest-product__item">
                    <div class="latest-product__item__pic">
                        <img src="img/item_image_placeholder.jpg" alt="">
                    </div>
                    <div class="latest-product__item__text">
                        <h6>{{items.item_name}}</h6>
                        <div v-for="variant in items.variants">
                            <div v-for="store in variant.stores">
                                <span>{{store.default_price}}</span>
                            </div>
                         </div>
                    </div>
                </a>
            </div>

And here's my Vue.js:

    window.onload = function () {
  const access_token = "";

  new Vue({
    el: '#item-data',
    data () {
      return {
        data:[],
        selectedUser:'',
        itemCart: [],
        search:'',
        quantity: '',
        cartCheckout: []
      }
    },
    mounted () {
      axios.get('**api call here**', {
        headers : {
          Authorization: 'Bearer ' + access_token
        },
        params: {
          limit: 250
        }
      })
        .then((response) => {
          // handle success
          this.data = response.data.items
          console.log(response);
          removeLoader();
        })
        .catch(function (error) {
          // handle error
          console.log(error);
        })
        .then(function () {

        });
    },
    computed:{
      cartItem(){
        return store.getters.printCart;
      },
      count(){
        return store.state.cartCount;
      },
    },
    methods:{
      sendInfo(items) {
        this.selectedUser = items;
      },
      addCart: function(cartdets){
        store.commit('addCart', cartdets);
        store.commit('addCount', 1);
      }
    }
  })
}

What I want now is to add a search function to my displayed items. I already added v-model to my input tag. The items are dynamically displayed using vue and I want a search function for specific items.

Answer 1

You could create a computed property, maybe name it something like filteredItems, and make it loop through all of your items and save the items you want to display into an array and then return that array.

Then in your html use a v-for to display the items from filteredItems.