अब तक मैं एक टेबल में डेटा प्राप्त कर सकता हूं जब मैं एक कलाकार का नाम हार्ड कोड करता हूं। मैं जो चाहता हूं वह एपीआई कॉल में लिंक करने के लिए मेरा खोज बॉक्स है, इसलिए जब मैं किसी कलाकार की खोज करता हूं, तो वे परिणाम दिखाई देते हैं, मैं Vue के लिए नया हूं। मैंने अब तक बनाया है, मुझे लगता है कि एपीआई कॉल को कुछ ऐसा होना चाहिए:

https://itunes.apple.com/search?term=${this.search}&entity=album

<template>
  <div class="jumbotron">
    <h1 class="display-4">{{title}}</h1>
    <p class="lead">{{intro}}</p>
    <hr class="my-4">
    <form class="col-lg-6 col-sm-12 mr-auto ml-auto">
      <input
        class="form-control form-control-lg mb-3"
        type="search"
        placeholder="Search"
        aria-label="Search"
      >
      <table class="table table-sm table-light table-bordered" v-if="result.length">
        <thead class="thead-dark">
          <tr class="col-8">
            <th scope="col">Name</th>
            <th scope="col">Artist</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(result, index) in result" :key="index">
            <td>{{result.collectionName}}</td>
            <td>{{result.artistName}}</td>
          </tr>
        </tbody>
      </table>
      <button
        class="btn btn-success btn-lg btn-block mb-3"
        type="submit"
        v-on:click="getData"
        v-if="result.length < 1"
      >Get data</button>
    </form>
  </div>
</template>

<script>
export default {
  name: "Hero",
  props: {
    navLink: String
  },
  data: function() {
    return {
      title: "Simple Search",
      intro: "This is a simple hero unit, a simple jumbotron-style.",
      subintro:
        "It uses utility classes for typography and spacing to space content out.",
      result: [],
      search: ""
    };
  },

  watch: {
    search: function(val) {
      if (!val) {
        this.result = [];
      }
    }
  },

  methods: {
    getData: function() {
      fetch(
        "https://cors-anywhere.herokuapp.com/https://itunes.apple.com/search?term=drake&entity=album"
      )
        .then(response => response.json())
        .then(data => {
          this.result = data.results;
          console.log(data);
        });
    }
  }
};
</script>

<style>
.jumbotron {
  margin-bottom: 0rem !important;
}

.table {
  width: 100% !important;
}
</style>

जैसा कि आप देख सकते हैं कि मैंने कलाकार 'ड्रेक' को सिर्फ प्रयोग करने के लिए हार्ड कोड किया है, लेकिन मैं इसे इनपुट खोज से कैसे जोड़ सकता हूं?

0
Sole 16 जून 2019, 14:30

1 उत्तर

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

यह काफी आसान है। मुझे वर्णन करने दो।

  1. फॉर्म को अक्षम करें। button के अंदर form पृष्ठ को पुनः लोड करने का कारण बनता है लेकिन आपको इसकी आवश्यकता नहीं है।
<!--<form class="col-lg-6 col-sm-12 mr-auto ml-auto">-->
    ... some useful code inside ...
<!--</form>-->
  1. अपने मॉडल के साथ इनपुट फ़ील्ड को v-model से कनेक्ट करें
<input
    ....
    aria-label="Search"
    v-model="search"
>
  1. जब घटक url को this.search के रूप में बनाता है तो मॉडल का उपयोग करें। डेटा को प्रतिक्रियाशील रूप से प्रदान किया जाना है।
fetch(
  `https://cors-anywhere.herokuapp.com/https://itunes.apple.com/search?term=${this.search}&entity=album`
)

आप दस्तावेज़ीकरण में कनेक्शन फ़ॉर्म और Vue के मॉडल के बारे में अधिक जान सकते हैं।

1
MartenCatcher 16 जून 2019, 11:59