使用组合 api 和远程 api 制作 vuetify 自动完成？

Question

问题如下：

您如何使用 Vuetify 自动完成和全新的组合 api 进行 API 调用？

Answer 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>

我是在codesandbox中做的 https://codesandbox.io/s/vuetify-autocomplete-basic-p6q9m?file=/src/components/HelloWorld.vue

使用组合 api 和远程 api 制作 vuetify 自动完成？

Making a vuetify autocomplete with composition api and remote api?

vuetify.js

vue-composition-api