Home vuetify axios Asynchronous items search result
Reply: 0

vuetify axios Asynchronous items search result

ToTe
1#
ToTe Published in 2017-12-06 09:08:05Z

I work with a vuetify template and I want to use the Asynchronous items [https://vuetifyjs.com/components/selects#example-10][1]

I just ask the api of an moviedb and I got an result. That´s all fine. But, at the moment I have to map() the object to an array to see a result, when I tap in the searchbar. But I want to use the ID for further use and to show a thumb image. After several hours of trying I am running out of ideas.

  findMovie: function (value) {
    this.loading = true
    let vm = this
    axios
      .get(value)
      .then(res => {
        vm.items = res.data.results
          .filter(e => {
            return (e.title || '')
          })
          .map(nameNew => {
            return nameNew.title
          })
        this.loading = false
      })
      .catch(err => {
        console.log(err)
      })
  },
  watch: {
    search (val) {
      val && this.findMovie(val)
    }
  }

Vuetify Template

<v-select
        @keyup.enter="alertMe"
        label="Async items"
        autocomplete
        :loading="loading"
        dark
        cache-items
        required
        :items="items"
        :rules="[() => select.length > 0 || 'You must choose at least one']"
        :search-input.sync="search"
        v-model="select"
      >
        <template slot="item" slot-scope="data">
          <template v-if="typeof data.item !== 'object'">
            {{ data.item }}
            <v-list-tile-content v-text=""></v-list-tile-content>
          </template>
          <template v-else>
            <v-list-tile-content>
              <img v-bind:src="'https://image.tmdb.org/t/p/w500' + data.item.poster_path" width="50"/>
              <v-list-tile-title v-html="data.item.id"></v-list-tile-title>
              <v-list-tile-sub-title v-html="data.item.adult"></v-list-tile-sub-title>
            </v-list-tile-content>
          </template>
        </template>
      </v-select>

The funny thing is, that when I tap a letter "g" for example, and than hit BACKSPACE I get the results from the object, when I use this approch: But only then. Not while I tap in the searchbar.

  findMovie: function (value) {
    this.loading = true
    let vm = this
    axios
      .get(value)
      .then(res => {
        vm.items = res.data.results
        this.loading = false
      })
      .catch(err => {
        console.log(err)
      })
  },

I would be glad for any help.

Thank you

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.310978 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO