Help: Vuetify wrap up AJAX + autocomplete + chips + avatar

hello,

I am stuck at this stage:

<v-autocomplete
                              v-model="team"
                              :disabled="isLoading"
                              :items="crew"
                              :search-input.sync="search"
                              chips
                              deletable-chips
                              clearable
                              color="blue-grey lighten-2"
                              label="Starship crew"
                              item-text="'nome+cognome'"
                              item-value="id"
                              prepend-icon="mdi-puzzle-plus-outline"
                              hide-no-data
                              multiple
                            >
                              <template v-slot:selection="data">
                                <v-chip
                                  v-bind="data.attrs"
                                  :input-value="data.selected"
                                  close
                                  @click="data.select"
                                  @click:close="remove(data.crew)"
                                >
                                  <v-avatar left>
                                    <v-img :src="'require(data.selected.avatar)'"></v-img>
                                  </v-avatar>
                                </v-chip>
                              </template>
                              <template v-slot:item="data">
                                <template v-if="typeof data.item !== 'object'">
                                  <v-list-item-content v-text="data.item"></v-list-item-content>
                                </template>
                                <template v-else>
                                  <v-list-item-avatar>
                                    <img :src="data.item.avatar">
                                  </v-list-item-avatar>
                                  <v-list-item-content>
                                    <v-list-item-title v-html="data.item.nome"></v-list-item-title>
                                    <v-list-item-subtitle v-html="data.item.jd"></v-list-item-subtitle>
                                  </v-list-item-content>
                                </template>
                              </template>
                            </v-autocomplete>

where i can retreive just name…

<script>
import API from '@/assets/js/api'

export default {
  data: function () {
    return {
      loaded: false,
      dialog: false,
      isLoading: false,
      search: null,
      min: 0,
      max: 99999,
      slider: 0,
      crew: [],
      team: null,
      starship: [
        {
          ss_name: '',
          ss_logo: '',
          ss_date: '',
          ss_quota: ''
        }
      ]
    }
  },
  watch: {
    search (val) {
      // Items have already been loaded
      if (this.crew.length > 0) return

      // Items have already been requested
      if (this.isLoading) return

      this.isLoading = true

      // Lazily load input items
      API.get('/users/getuser.php?act=list-available')
        .then((response) => {
          if (response.data.status === 'ok') {
            for (var i = 0; i < response.data.user.length; i++) {
              this.crew.push({
                nome: response.data.user[i].nome,
                cognome: response.data.user[i].cognome,
                jd: response.data.user[i].jd,
                id: response.data.user[i].id,
                avatar: response.data.user[i].avatar
              })
            }
            this.isLoading = false
          } else {
            console.error(response.data.status)
          }
        })
    }
  },
  created: function () {
    this.getStarship()
  },
  computed: {
    nomeIntero: (index) => {
      return this.crew[index].nome + ' ' + this.crew[index].cognome
    }
  },
  methods: {
    getStarship: function () {
      API.get('/admin/starship.php?act=list')
        .then((response) => {
          if (response.data.status === 'ok') {
            this.starship = []
            for (var i = 0; i < response.data.starship.length; i++) {
              this.starship.push({
                ss_name: response.data.starship[i].ss_name,
                ss_logo: response.data.starship[i].ss_logo,
                ss_date: response.data.starship[i].ss_date,
                ss_quota: response.data.starship[i].ss_quota
              })
            }
            this.loaded = true
          } else {
            console.error(response.data.status)
          }
        })
    },
    decrement () {
      this.slider = this.slider - 1000
    },
    increment () {
      this.slider = this.slider + 1000
    },
    remove (item) {
      const index = this.crew.indexOf(item.name)
      if (index >= 0) this.crew.splice(index, 1)
    },
    addStarship: function () {
      console.log('ok')
    }
  }
}
</script>

while i’d need the avatar, the full name and a placeholder for the ID…

I can’t figure it out why, according to vuetify guides, to work with chips they bind a “data”, but then data is not reachable…

:exploding_head:

When referencing guides it’s best to provide a link. I took a quick look on Vuetify to see what you were referring to, but I see no mention of “data”.

in these example https://vuetifyjs.com/en/components/autocompletes/#slots
when the start using chips with avatars, they use data but i cant’ figure it out how to adapt to my case…

any clues? :frowning: