Question

Vuetify提供一个选择字段组件，该组件用于从选项列表中收集用户提供的信息。 Here for the documentation

该组件可与复选框一起使用，因此，每次检查项目时，它都会添加到列表的末尾。

现在我想做的是多次在列表中添加相同的项目，因此每次单击该项目时，它都会添加到列表的末尾。 Vuetify是否可以实现？

Answer 1

如果您有相同名称的商品，则需要使用其独特的属性（此处为“ id”）来区分。

并使用item-text和item-value，如示例所示。

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    items: [
      { id: 1, name: 'foo' }, 
      { id: 2, name: 'bar' }, 
      { id: 3, name: 'foo' }, 
      { id: 4, name: 'fizz' }, 
      { id: 5, name:  'bar' }],
    value: null,
  }),
})

<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<div id="app">
  <v-app id="inspire">
    <v-container fluid>
      <v-row align="center">
        <v-col cols="12" sm="6">
          <v-select v-model="value" :items="items" item-text="name" item-value="id" attach chips label="Chips" multiple></v-select>
        </v-col>
        <v-col>
          <pre>{{ value }}</pre>
        </v-col>
      </v-row>
    </v-container>
  </v-app>
</div>

Answer 2

因此图像有点误导。如果您希望使用自动建议来获取标签输入，那么我宁愿将其分开。

可以使用v-text-field来增强下面的示例，但对我来说有点。

请让我知道该解决方案如何帮助您：）

new Vue({
  el: '#app',
  vuetify: new Vuetify({ icons: { iconfont: 'md' } }),
  data: () => ({
    options: [
      { id: 1, name: 'foo' },
      { id: 2, name: 'bar' },
      { id: 3, name: 'fizz' }],
    value: [
      { id: 1, name: 'foo' },
      { id: 1, name: 'foo' }
    ],
  }),
})

<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<div id="app">
<v-app id="inspire">
  <v-container fluid>
    <v-row>
      <v-col cols="12" sm="12">
        <v-chip class='mr-2' v-for='({id, name}, i) in value'>
          {{ id }}: {{ name  }}
          <v-icon class='ml-2' small @click='value.splice(i, 1)'>close</v-icon>
        </v-chip>
        <v-menu>
          <template v-slot:activator='{ on }'>
            <v-btn icon v-on='on' class='green'>
              <v-icon>add</v-icon>
            </v-btn>
          </template>
          <v-list>
            <v-list-item v-for='o in options' @click='value.push(o)'>
              <v-list-item-title>{{ o.name }}</v-list-item-title>
            </v-list-item>
          </v-list>
        </v-menu>
      </v-col>
      <v-col>
        <pre>{{ value }}</pre>
      </v-col>
    </v-row>
  </v-container>
</v-app>
</div>

如何使用Vuetify v-select多次添加同一项目

2 个答案: