如何在每个 VuetifyJS 组合框条目前面添加一个图标？答案

【问题标题】：How to add an icon in front of every VuetifyJS combobox entry?如何在每个 VuetifyJS 组合框条目前面添加一个图标？
【发布时间】：2018-08-15 12:02:46
【问题描述】：

我正在使用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'
      ]
    }
  }
})

【问题讨论】：

标签： javascript vue.js combobox vuetify.js

【解决方案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。

【讨论】：