मैं Vue.js में नया हूं, और मैं अपनी साइट के लिए एक खोज फ़ंक्शन जोड़ना चाहता हूं। डेटा एक एपीआई कॉल से है और vue.js का उपयोग करके भी प्रदर्शित किया जाता है।

एचटीएमएल कोड प्रदर्शित करें:

<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>

और यहाँ मेरा 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);
      }
    }
  })
}

मैं अब जो चाहता हूं वह मेरे प्रदर्शित वस्तुओं में एक खोज फ़ंक्शन जोड़ना है। मैंने पहले ही अपने इनपुट टैग में वी-मॉडल जोड़ा है। आइटम गतिशील रूप से vue का उपयोग करके प्रदर्शित होते हैं और मैं विशिष्ट वस्तुओं के लिए एक खोज फ़ंक्शन चाहता हूं।

0
Ryan 12 जून 2020, 23:07

1 उत्तर

सबसे बढ़िया उत्तर

आप एक गणना की गई संपत्ति बना सकते हैं, शायद इसे filteredItems जैसा कुछ नाम दें, और इसे अपने सभी आइटमों के माध्यम से लूप करें और उन वस्तुओं को सहेजें जिन्हें आप एक सरणी में प्रदर्शित करना चाहते हैं और फिर उस सरणी को वापस कर दें।

फिर अपने एचटीएमएल में filteredItems से आइटम प्रदर्शित करने के लिए v-for का उपयोग करें।

1
edu 12 जून 2020, 20:15