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。

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

1 个答案: