javascript - 如何在每个 VuetifyJS 组合框条目前添加一个图标？

Question

我正在使用 combobox component of VuetifyJS我需要在下拉列表中的每个条目前添加一个图标。怎么做？这是组合框的 CodePen 示例:https://codepen.io/anon/pen/KBLXYO

HTML

 <div id="app">
  <v-app id="inspire">
    <v-container fluid>
      <v-layout wrap>
        <v-flex xs12>
          <v-combobox
            v-model="select"
            :items="items"
            label="Select a favorite activity or create a new one"
          ></v-combobox>
        </v-flex>
      </v-layout>
    </v-container>
  </v-app>
</div>

JS:

 new Vue({
  el: '#app',
  data () {
    return {
      select: 'Programming',
      items: [
        'Programming',
        'Design',
        'Vue',
        'Vuetify'
      ]
    }
  }
})

Answer 1

使用 item 作用域插槽。

<v-combobox
  v-model="select"
  :items="items"
  label="Select a favorite activity or create a new one">

  <template slot="item" slot-scope="data">
    <v-icon>home</v-icon>  {{data.item}}
  </template>

</v-combobox>

这是您的 pen updated .

FWIW，这都涵盖了 in the documentation .