Home>

I want to hit the API with the contents of the form as an argument when the button is pressed, and display the result in the form of a card using v-for.

When I press the button, the screen does not change and the Card is not displayed.

Corresponding source code
<template>
  
  
    
       Search for songs 
    <p>Search for song</p>
    
  
  <br>
  <br>
  
    
    <form>
        
      <select v-model = "type">
        <option>From song title</option>
        <option>From artist name</option>
      </select>
      <input type = "search" placeholder = "Search" aria-label = "Search" v-model = "keyword">
      <button type = "submit" v-on: click = "Search ()">Search</button>
        
    </form>
    
  
   <hr>
    
    <section>
        
          
            
               {{item.Title}} 
            <ul>
              <li>Artist name: {{item.Artist}}</li>
              <li>Lyrics: {{item.Word}}</li>
              <li>Composition: {{item.Composer}}</li>
              <li>Arrangement: {{item.Arranger}}</li>
            </ul>
            
          
        
    </section>
    
  
</template>
<script>
import axios from "axios";
export default {
  name: "song",
  date: function () {
    return {
      type: "",
      keyword: "",
      items: [],
      list: []
    }
  },
  methods: {
    Search: function () {
      search2.get (this.type, this.keyword)
    }
  }
}
let search2 = {
  get: async function (type, keyword) {
    const res = await axios.get ('URL? title ='+ keyword)
    this.items = res.data.Items
    console.log (this.items)
  }
}
</script>
What I tried

When I checked using console.log, the desired data was returned from the API.
I thought it was a problem with the timing of redrawing, so I tried entering the data in advance, but it was still not displayed.

Supplementary information (FW/tool version, etc.)

axios: 0.21.0
bootstrap: 4.5.3
bootstrap-vue: 2.19.0
core-js: 3.6.5
vue: 2.6.12
vue-router: 3.4.9

The following is an example of JSON returned from the API.

[
        {
            "Title": "Silhouette",
            "Composer": [
                "Taniguchi Maguro"
            ],,
            "Artist": "KANA-BOON",
            "Word": [
                "Taniguchi Maguro"
            ],,
            "Arranger": [
                "KANA-BOON"
            ],,
            "Genre": [
                "J-POP",
                "Anime"
            ]
        }
]
  • Answer # 1

    I put the result in this.items in search2, but this in there is different from this that vue sees

    How about returning res.data.Items in get of search2 and assigning the return value to this.items on the Search side?