Создание автозаполнения vuetify с помощью API композиции и удаленного API?

Проблема в следующем:

Как вам удается выполнить вызов API, используя автозаполнение Vuetify и новый API композиции?

1 ответ

Решение

Похоже, что это не сильно отличается от Vue 2.

в main.js

import Vue from 'vue'
import VueCompositionApi from '@vue/composition-api'
import Vuetify from 'vuetify'

import App from './App.vue'

Vue.use(Vuetify)
Vue.use(VueCompositionApi)

Vue.config.productionTip = false

new Vue({
  vuetify: new Vuetify({}),
  render: h => h(App)
}).$mount('#app')

в App.vue

<template>
  <div id="app" data-app>
    <v-autocomplete
      v-model="model"
      :items="items"
      item-text="first_name"
      item-value="id"
      label="Select a user..."
    />
  </div>
</template>

<script>
import { ref, onMounted }  from '@vue/composition-api'

export default {
  setup() {
    const model = ref(null)
    const items = ref()

    const getUsers = async () => {
      const { data } = await (
        await  fetch('https://reqres.in/api/users')
      ).json()

      items.value = data
    }

    onMounted(getUsers)

    return {
      model,
      items,
    }
  }
}
</script>

Я сделал это в codeandboxhttps://codesandbox.io/s/vuetify-autocomplete-basic-p6q9m?file=/src/components/HelloWorld.vue

Другие вопросы по тегам