自动完成

v-autocomplete 组件提供简单灵活的输入提示功能。当搜索大量数据甚至从 API 中动态请求信息时是十分有用的。

用例

自动完成组件扩展了v-select并为其增加了过滤项目的能力。

Autocompletes（自动补全） - 图1

在为 items 属性使用对象时，您必须将 item-text 和 item-value 与对象上的现有属性关联。这些值默认为 text 和 value，可以更改。

menu-props 的 auto 属性只支持默认输入样式。

浏览器自动完成默认设置为关闭，可能因浏览器而异，可能会被忽略。MDN

API

从下面选择您想要的组件，并查看可用的属性、插槽、事件和函数。

Autocompletes（自动补全） - 图2

示例

下面是一些简单到复杂的例子。

搜索 API

轻松绑定动态数据并创造独特的体验。v-autocomplete 的扩展的支持列表使得对输入的各个方面进行调优变得很容易。

template script

  1. <template>
  2.   <v-card
  3.     color="red lighten-2"
  4.     dark
  5.   >
  6.     <v-card-title class="headline red lighten-3">
  7.       Search for Public APIs
  8.     </v-card-title>
  9.     <v-card-text>
  10.       Explore hundreds of free API's ready for consumption! For more information visit
  11.       <a
  12.         class="grey--text text--lighten-3"
  13.         href="https://github.com/toddmotto/public-apis"
  14.         target="_blank"
  15.       >the Github repository</a>.
  16.     </v-card-text>
  17.     <v-card-text>
  18.       <v-autocomplete
  19.         v-model="model"
  20.         :items="items"
  21.         :loading="isLoading"
  22.         :search-input.sync="search"
  23.         color="white"
  24.         hide-no-data
  25.         hide-selected
  26.         item-text="Description"
  27.         item-value="API"
  28.         label="Public APIs"
  29.         placeholder="Start typing to Search"
  30.         prepend-icon="mdi-database-search"
  31.         return-object
  32.       ></v-autocomplete>
  33.     </v-card-text>
  34.     <v-divider></v-divider>
  35.     <v-expand-transition>
  36.       <v-list v-if="model" class="red lighten-3">
  37.         <v-list-item
  38.           v-for="(field, i) in fields"
  39.           :key="i"
  40.         >
  41.           <v-list-item-content>
  42.             <v-list-item-title v-text="field.value"></v-list-item-title>
  43.             <v-list-item-subtitle v-text="field.key"></v-list-item-subtitle>
  44.           </v-list-item-content>
  45.         </v-list-item>
  46.       </v-list>
  47.     </v-expand-transition>
  48.     <v-card-actions>
  49.       <v-spacer></v-spacer>
  50.       <v-btn
  51.         :disabled="!model"
  52.         color="grey darken-3"
  53.         @click="model = null"
  54.       >
  55.         Clear
  56.         <v-icon right>mdi-close-circle</v-icon>
  57.       </v-btn>
  58.     </v-card-actions>
  59.   </v-card>
  60. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       descriptionLimit: 60,
  5.       entries: [],
  6.       isLoading: false,
  7.       model: null,
  8.       search: null,
  9.     }),
  11.     computed: {
  12.       fields () {
  13.         if (!this.model) return []
  15.         return Object.keys(this.model).map(key => {
  16.           return {
  17.             key,
  18.             value: this.model[key] || 'n/a',
  19.           }
  20.         })
  21.       },
  22.       items () {
  23.         return this.entries.map(entry => {
  24.           const Description = entry.Description.length > this.descriptionLimit
  25.             ? entry.Description.slice(0, this.descriptionLimit) + '...'
  26.             : entry.Description
  28.           return Object.assign({}, entry, { Description })
  29.         })
  30.       },
  31.     },
  33.     watch: {
  34.       search (val) {
  35.         // Items have already been loaded
  36.         if (this.items.length > 0) return
  38.         // Items have already been requested
  39.         if (this.isLoading) return
  41.         this.isLoading = true
  43.         // Lazily load input items
  44.         fetch('https://api.publicapis.org/entries')
  45.           .then(res => res.json())
  46.           .then(res => {
  47.             const { count, entries } = res
  48.             this.count = count
  49.             this.entries = entries
  50.           })
  51.           .catch(err => {
  52.             console.log(err)
  53.           })
  54.           .finally(() => (this.isLoading = false))
  55.       },
  56.     },
  57.   }
  58. </script>

Autocompletes（自动补全） - 图3

自动完成时的自定义过滤器

propfilter可以用来过滤每个项目，并带有自定义逻辑。在这个例子中，我们按名称过滤项目

template script

  1. <template>
  2.   <v-card
  3.     class="overflow-hidden"
  4.     color="purple lighten-1"
  5.     dark
  6.   >
  7.     <v-toolbar
  8.       flat
  9.       color="purple"
  10.     >
  11.       <v-icon>mdi-account</v-icon>
  12.       <v-toolbar-title class="font-weight-light">User Profile</v-toolbar-title>
  13.       <v-spacer></v-spacer>
  14.       <v-btn
  15.         color="purple darken-3"
  16.         fab
  17.         small
  18.         @click="isEditing = !isEditing"
  19.       >
  20.         <v-icon v-if="isEditing">mdi-close</v-icon>
  21.         <v-icon v-else>mdi-pencil</v-icon>
  22.       </v-btn>
  23.     </v-toolbar>
  24.     <v-card-text>
  25.       <v-text-field
  26.         :disabled="!isEditing"
  27.         color="white"
  28.         label="Name"
  29.       ></v-text-field>
  30.       <v-autocomplete
  31.         :disabled="!isEditing"
  32.         :items="states"
  33.         :filter="customFilter"
  34.         color="white"
  35.         item-text="name"
  36.         label="State"
  37.       ></v-autocomplete>
  38.     </v-card-text>
  39.     <v-divider></v-divider>
  40.     <v-card-actions>
  41.       <v-spacer></v-spacer>
  42.       <v-btn
  43.         :disabled="!isEditing"
  44.         color="success"
  45.         @click="save"
  46.       >
  47.         Save
  48.       </v-btn>
  49.     </v-card-actions>
  50.     <v-snackbar
  51.       v-model="hasSaved"
  52.       :timeout="2000"
  53.       absolute
  54.       bottom
  55.       left
  56.     >
  57.       Your profile has been updated
  58.     </v-snackbar>
  59.   </v-card>
  60. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         hasSaved: false,
  6.         isEditing: null,
  7.         model: null,
  8.         states: [
  9.           { name: 'Florida', abbr: 'FL', id: 1 },
  10.           { name: 'Georgia', abbr: 'GA', id: 2 },
  11.           { name: 'Nebraska', abbr: 'NE', id: 3 },
  12.           { name: 'California', abbr: 'CA', id: 4 },
  13.           { name: 'New York', abbr: 'NY', id: 5 },
  14.         ],
  15.       }
  16.     },
  18.     methods: {
  19.       customFilter (item, queryText, itemText) {
  20.         const textOne = item.name.toLowerCase()
  21.         const textTwo = item.abbr.toLowerCase()
  22.         const searchText = queryText.toLowerCase()
  24.         return textOne.indexOf(searchText) > -1 ||
  25.           textTwo.indexOf(searchText) > -1
  26.       },
  27.       save () {
  28.         this.isEditing = !this.isEditing
  29.         this.hasSaved = true
  30.       },
  31.     },
  32.   }
  33. </script>

Autocompletes（自动补全） - 图4

密集

您可以使用 dense 属性来降低自动完成高度和列表项的最大高度。

template script

  1. <template>
  2.   <v-card>
  3.     <v-container fluid>
  4.       <v-row
  5.         align="center"
  6.       >
  7.         <v-col cols="12">
  8.           <v-autocomplete
  9.             v-model="values"
  10.             :items="items"
  11.             outlined
  12.             dense
  13.             chips
  14.             small-chips
  15.             label="Outlined"
  16.             multiple
  17.           ></v-autocomplete>
  18.         </v-col>
  19.         <v-col cols="12">
  20.           <v-autocomplete
  21.             v-model="values"
  22.             :items="items"
  23.             dense
  24.             chips
  25.             small-chips
  26.             label="Solo"
  27.             multiple
  28.             solo
  29.           ></v-autocomplete>
  30.         </v-col>
  31.         <v-col cols="12">
  32.           <v-autocomplete
  33.             v-model="value"
  34.             :items="items"
  35.             dense
  36.             filled
  37.             label="Filled"
  38.           ></v-autocomplete>
  39.         </v-col>
  40.       </v-row>
  41.     </v-container>
  42.   </v-card>
  43. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       items: ['foo', 'bar', 'fizz', 'buzz'],
  5.       values: ['foo', 'bar'],
  6.       value: null,
  7.     }),
  8.   }
  9. </script>

Autocompletes（自动补全） - 图5

插槽

利用插槽的强大功能，您可以自定义选择的可视输出。在本例中，我们为纸片和列表项添加了一个配置文件图片。

template script

  1. <template>
  2.   <v-card
  3.     color="blue-grey darken-1"
  4.     dark
  5.     :loading="isUpdating"
  6.   >
  7.     <template v-slot:progress>
  8.       <v-progress-linear
  9.         absolute
  10.         color="green lighten-3"
  11.         height="4"
  12.         indeterminate
  13.       ></v-progress-linear>
  14.     </template>
  15.     <v-img
  16.       height="200"
  17.       src="https://cdn.vuetifyjs.com/images/cards/dark-beach.jpg"
  18.     >
  19.       <v-row>
  20.         <v-col
  21.           class="text-right"
  22.           cols="12"
  23.         >
  24.           <v-menu
  25.             bottom
  26.             left
  27.             transition="slide-y-transition"
  28.           >
  29.             <template v-slot:activator="{ on }">
  30.               <v-btn
  31.                 icon
  32.                 v-on="on"
  33.               >
  34.                 <v-icon>mdi-dots-vertical</v-icon>
  35.               </v-btn>
  36.             </template>
  37.             <v-list>
  38.               <v-list-item @click="isUpdating = true">
  39.                 <v-list-item-action>
  40.                   <v-icon>mdi-settings</v-icon>
  41.                 </v-list-item-action>
  42.                 <v-list-item-content>
  43.                   <v-list-item-title>Update</v-list-item-title>
  44.                 </v-list-item-content>
  45.               </v-list-item>
  46.             </v-list>
  47.           </v-menu>
  48.         </v-col>
  49.         <v-row
  50.           class="pa-4"
  51.           align="center"
  52.           justify="center"
  53.         >
  54.           <v-col class="text-center">
  55.             <h3 class="headline">{{ name }}</h3>
  56.             <span class="grey--text text--lighten-1">{{ title }}</span>
  57.           </v-col>
  58.         </v-row>
  59.       </v-row>
  60.     </v-img>
  61.     <v-form>
  62.       <v-container>
  63.         <v-row>
  64.           <v-col
  65.             cols="12"
  66.             md="6"
  67.           >
  68.             <v-text-field
  69.               v-model="name"
  70.               :disabled="isUpdating"
  71.               filled
  72.               color="blue-grey lighten-2"
  73.               label="Name"
  74.             ></v-text-field>
  75.           </v-col>
  76.           <v-col
  77.             cols="12"
  78.             md="6"
  79.           >
  80.             <v-text-field
  81.               v-model="title"
  82.               :disabled="isUpdating"
  83.               filled
  84.               color="blue-grey lighten-2"
  85.               label="Title"
  86.             ></v-text-field>
  87.           </v-col>
  88.           <v-col cols="12">
  89.             <v-autocomplete
  90.               v-model="friends"
  91.               :disabled="isUpdating"
  92.               :items="people"
  93.               filled
  94.               chips
  95.               color="blue-grey lighten-2"
  96.               label="Select"
  97.               item-text="name"
  98.               item-value="name"
  99.               multiple
  100.             >
  101.               <template v-slot:selection="data">
  102.                 <v-chip
  103.                   v-bind="data.attrs"
  104.                   :input-value="data.selected"
  105.                   close
  106.                   @click="data.select"
  107.                   @click:close="remove(data.item)"
  108.                 >
  109.                   <v-avatar left>
  110.                     <v-img :src="data.item.avatar"></v-img>
  111.                   </v-avatar>
  112.                   {{ data.item.name }}
  113.                 </v-chip>
  114.               </template>
  115.               <template v-slot:item="data">
  116.                 <template v-if="typeof data.item !== 'object'">
  117.                   <v-list-item-content v-text="data.item"></v-list-item-content>
  118.                 </template>
  119.                 <template v-else>
  120.                   <v-list-item-avatar>
  121.                     <img :src="data.item.avatar">
  122.                   </v-list-item-avatar>
  123.                   <v-list-item-content>
  124.                     <v-list-item-title v-html="data.item.name"></v-list-item-title>
  125.                     <v-list-item-subtitle v-html="data.item.group"></v-list-item-subtitle>
  126.                   </v-list-item-content>
  127.                 </template>
  128.               </template>
  129.             </v-autocomplete>
  130.           </v-col>
  131.         </v-row>
  132.       </v-container>
  133.     </v-form>
  134.     <v-divider></v-divider>
  135.     <v-card-actions>
  136.       <v-switch
  137.         v-model="autoUpdate"
  138.         :disabled="isUpdating"
  139.         class="mt-0"
  140.         color="green lighten-2"
  141.         hide-details
  142.         label="Auto Update"
  143.       ></v-switch>
  144.       <v-spacer></v-spacer>
  145.       <v-btn
  146.         :disabled="autoUpdate"
  147.         :loading="isUpdating"
  148.         color="blue-grey darken-3"
  149.         depressed
  150.         @click="isUpdating = true"
  151.       >
  152.         <v-icon left>mdi-update</v-icon>
  153.         Update Now
  154.       </v-btn>
  155.     </v-card-actions>
  156.   </v-card>
  157. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       const srcs = {
  5.         1: 'https://cdn.vuetifyjs.com/images/lists/1.jpg',
  6.         2: 'https://cdn.vuetifyjs.com/images/lists/2.jpg',
  7.         3: 'https://cdn.vuetifyjs.com/images/lists/3.jpg',
  8.         4: 'https://cdn.vuetifyjs.com/images/lists/4.jpg',
  9.         5: 'https://cdn.vuetifyjs.com/images/lists/5.jpg',
  10.       }
  12.       return {
  13.         autoUpdate: true,
  14.         friends: ['Sandra Adams', 'Britta Holt'],
  15.         isUpdating: false,
  16.         name: 'Midnight Crew',
  17.         people: [
  18.           { header: 'Group 1' },
  19.           { name: 'Sandra Adams', group: 'Group 1', avatar: srcs[1] },
  20.           { name: 'Ali Connors', group: 'Group 1', avatar: srcs[2] },
  21.           { name: 'Trevor Hansen', group: 'Group 1', avatar: srcs[3] },
  22.           { name: 'Tucker Smith', group: 'Group 1', avatar: srcs[2] },
  23.           { divider: true },
  24.           { header: 'Group 2' },
  25.           { name: 'Britta Holt', group: 'Group 2', avatar: srcs[4] },
  26.           { name: 'Jane Smith ', group: 'Group 2', avatar: srcs[5] },
  27.           { name: 'John Smith', group: 'Group 2', avatar: srcs[1] },
  28.           { name: 'Sandra Williams', group: 'Group 2', avatar: srcs[3] },
  29.         ],
  30.         title: 'The summer breeze',
  31.       }
  32.     },
  34.     watch: {
  35.       isUpdating (val) {
  36.         if (val) {
  37.           setTimeout(() => (this.isUpdating = false), 3000)
  38.         }
  39.       },
  40.     },
  42.     methods: {
  43.       remove (item) {
  44.         const index = this.friends.indexOf(item.name)
  45.         if (index >= 0) this.friends.splice(index, 1)
  46.       },
  47.     },
  48.   }
  49. </script>

Autocompletes（自动补全） - 图6

Alpha Theme

Complete theme experience including enhanced Vue CLI, full documentation, 5 custom components and much more!

ads by Vuetify

](https://store.vuetifyjs.com/product/alpha-theme?ref=vuetifyjs.com)

异步项目

有时您需要根据搜索查询从外部加载数据。 使用 autocomplete 属性时，请使用带有 .sync 修饰符的 search-input 属性。 我们还利用了新的 cache-items 属性。 这将保留已传递给 items 属性的所有物品的唯一列表，并且在使用异步属性和 multiple 属性时是 REQUIRED 的。

template script

  1. <template>
  2.   <v-toolbar
  3.     dark
  4.     color="teal"
  5.   >
  6.     <v-toolbar-title>State selection</v-toolbar-title>
  7.     <v-autocomplete
  8.       v-model="select"
  9.       :loading="loading"
  10.       :items="items"
  11.       :search-input.sync="search"
  12.       cache-items
  13.       class="mx-4"
  14.       flat
  15.       hide-no-data
  16.       hide-details
  17.       label="What state are you from?"
  18.       solo-inverted
  19.     ></v-autocomplete>
  20.     <v-btn icon>
  21.       <v-icon>mdi-dots-vertical</v-icon>
  22.     </v-btn>
  23.   </v-toolbar>
  24. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         loading: false,
  6.         items: [],
  7.         search: null,
  8.         select: null,
  9.         states: [
  10.           'Alabama',
  11.           'Alaska',
  12.           'American Samoa',
  13.           'Arizona',
  14.           'Arkansas',
  15.           'California',
  16.           'Colorado',
  17.           'Connecticut',
  18.           'Delaware',
  19.           'District of Columbia',
  20.           'Federated States of Micronesia',
  21.           'Florida',
  22.           'Georgia',
  23.           'Guam',
  24.           'Hawaii',
  25.           'Idaho',
  26.           'Illinois',
  27.           'Indiana',
  28.           'Iowa',
  29.           'Kansas',
  30.           'Kentucky',
  31.           'Louisiana',
  32.           'Maine',
  33.           'Marshall Islands',
  34.           'Maryland',
  35.           'Massachusetts',
  36.           'Michigan',
  37.           'Minnesota',
  38.           'Mississippi',
  39.           'Missouri',
  40.           'Montana',
  41.           'Nebraska',
  42.           'Nevada',
  43.           'New Hampshire',
  44.           'New Jersey',
  45.           'New Mexico',
  46.           'New York',
  47.           'North Carolina',
  48.           'North Dakota',
  49.           'Northern Mariana Islands',
  50.           'Ohio',
  51.           'Oklahoma',
  52.           'Oregon',
  53.           'Palau',
  54.           'Pennsylvania',
  55.           'Puerto Rico',
  56.           'Rhode Island',
  57.           'South Carolina',
  58.           'South Dakota',
  59.           'Tennessee',
  60.           'Texas',
  61.           'Utah',
  62.           'Vermont',
  63.           'Virgin Island',
  64.           'Virginia',
  65.           'Washington',
  66.           'West Virginia',
  67.           'Wisconsin',
  68.           'Wyoming',
  69.         ],
  70.       }
  71.     },
  72.     watch: {
  73.       search (val) {
  74.         val && val !== this.select && this.querySelections(val)
  75.       },
  76.     },
  77.     methods: {
  78.       querySelections (v) {
  79.         this.loading = true
  80.         // Simulated ajax query
  81.         setTimeout(() => {
  82.           this.items = this.states.filter(e => {
  83.             return (e || '').toLowerCase().indexOf((v || '').toLowerCase()) > -1
  84.           })
  85.           this.loading = false
  86.         }, 500)
  87.       },
  88.     },
  89.   }
  90. </script>

Autocompletes（自动补全） - 图7

高级插槽

v-autocomplete 组件非常灵活，几乎可以适应任何用例。 为 no-data, item 和 selection 插槽创建自定义显示，以提供独特的用户体验。 使用 slots 可使您轻松自定义应用程序所需的外观。

template script

  1. <template>
  2.   <v-toolbar color="orange accent-1">
  3.     <v-app-bar-nav-icon class="hidden-sm-and-down"></v-app-bar-nav-icon>
  4.     <v-toolbar-title class="title mr-6 hidden-sm-and-down">Cryptocurrency</v-toolbar-title>
  5.     <v-autocomplete
  6.       v-model="model"
  7.       :items="items"
  8.       :loading="isLoading"
  9.       :search-input.sync="search"
  10.       chips
  11.       clearable
  12.       hide-details
  13.       hide-selected
  14.       item-text="name"
  15.       item-value="symbol"
  16.       label="Search for a coin..."
  17.       solo
  18.     >
  19.       <template v-slot:no-data>
  20.         <v-list-item>
  21.           <v-list-item-title>
  22.             Search for your favorite
  23.             <strong>Cryptocurrency</strong>
  24.           </v-list-item-title>
  25.         </v-list-item>
  26.       </template>
  27.       <template v-slot:selection="{ attr, on, item, selected }">
  28.         <v-chip
  29.           v-bind="attr"
  30.           :input-value="selected"
  31.           color="blue-grey"
  32.           class="white--text"
  33.           v-on="on"
  34.         >
  35.           <v-icon left>mdi-coin</v-icon>
  36.           <span v-text="item.name"></span>
  37.         </v-chip>
  38.       </template>
  39.       <template v-slot:item="{ item }">
  40.         <v-list-item-avatar
  41.           color="indigo"
  42.           class="headline font-weight-light white--text"
  43.         >
  44.           {{ item.name.charAt(0) }}
  45.         </v-list-item-avatar>
  46.         <v-list-item-content>
  47.           <v-list-item-title v-text="item.name"></v-list-item-title>
  48.           <v-list-item-subtitle v-text="item.symbol"></v-list-item-subtitle>
  49.         </v-list-item-content>
  50.         <v-list-item-action>
  51.           <v-icon>mdi-coin</v-icon>
  52.         </v-list-item-action>
  53.       </template>
  54.     </v-autocomplete>
  55.     <template v-slot:extension>
  56.       <v-tabs
  57.         v-model="tab"
  58.         :hide-slider="!model"
  59.         color="blue-grey"
  60.         slider-color="blue-grey"
  61.       >
  62.         <v-tab :disabled="!model">News</v-tab>
  63.         <v-tab :disabled="!model">Trading</v-tab>
  64.         <v-tab :disabled="!model">Blog</v-tab>
  65.       </v-tabs>
  66.     </template>
  67.   </v-toolbar>
  68. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       isLoading: false,
  5.       items: [],
  6.       model: null,
  7.       search: null,
  8.       tab: null,
  9.     }),
  11.     watch: {
  12.       model (val) {
  13.         if (val != null) this.tab = 0
  14.         else this.tab = null
  15.       },
  16.       search (val) {
  17.         // Items have already been loaded
  18.         if (this.items.length > 0) return
  20.         this.isLoading = true
  22.         // Lazily load input items
  23.         fetch('https://api.coingecko.com/api/v3/coins/list')
  24.           .then(res => res.clone().json())
  25.           .then(res => {
  26.             this.items = res
  27.           })
  28.           .catch(err => {
  29.             console.log(err)
  30.           })
  31.           .finally(() => (this.isLoading = false))
  32.       },
  33.     },
  34.   }
  35. </script>

Autocompletes（自动补全） - 图8

状态选择器

结合使用 v-autocomplete 插槽和过渡，您可以创建一个时尚的可切换自动完成字段，例如此状态选择器。

template script

  1. <template>
  2.   <v-card>
  3.     <v-card-title class="headline font-weight-regular blue-grey white--text">Profile</v-card-title>
  4.     <v-card-text>
  5.       <v-subheader class="pa-0">Where do you live?</v-subheader>
  6.       <v-autocomplete
  7.         v-model="model"
  8.         :hint="!isEditing ? 'Click the icon to edit' : 'Click the icon to save'"
  9.         :items="states"
  10.         :readonly="!isEditing"
  11.         :label="`State — ${isEditing ? 'Editable' : 'Readonly'}`"
  12.         persistent-hint
  13.         prepend-icon="mdi-city"
  14.       >
  15.         <template v-slot:append-outer>
  16.           <v-slide-x-reverse-transition
  17.             mode="out-in"
  18.           >
  19.             <v-icon
  20.               :key="`icon-${isEditing}`"
  21.               :color="isEditing ? 'success' : 'info'"
  22.               @click="isEditing = !isEditing"
  23.               v-text="isEditing ? 'mdi-check-outline' : 'mdi-circle-edit-outline'"
  24.             ></v-icon>
  25.           </v-slide-x-reverse-transition>
  26.         </template>
  27.       </v-autocomplete>
  28.     </v-card-text>
  29.   </v-card>
  30. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         isEditing: false,
  6.         model: null,
  7.         states: [
  8.           'Alabama', 'Alaska', 'American Samoa', 'Arizona',
  9.           'Arkansas', 'California', 'Colorado', 'Connecticut',
  10.           'Delaware', 'District of Columbia', 'Federated States of Micronesia',
  11.           'Florida', 'Georgia', 'Guam', 'Hawaii', 'Idaho',
  12.           'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky',
  13.           'Louisiana', 'Maine', 'Marshall Islands', 'Maryland',
  14.           'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi',
  15.           'Missouri', 'Montana', 'Nebraska', 'Nevada',
  16.           'New Hampshire', 'New Jersey', 'New Mexico', 'New York',
  17.           'North Carolina', 'North Dakota', 'Northern Mariana Islands', 'Ohio',
  18.           'Oklahoma', 'Oregon', 'Palau', 'Pennsylvania', 'Puerto Rico',
  19.           'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee',
  20.           'Texas', 'Utah', 'Vermont', 'Virgin Island', 'Virginia',
  21.           'Washington', 'West Virginia', 'Wisconsin', 'Wyoming',
  22.         ],
  23.       }
  24.     },
  25.   }
  26. </script>

Autocompletes（自动补全） - 图9