在 vuetify 的 v-select 中添加一个条目答案

【问题标题】：Adding a entry in a v-select in vuetify在 vuetify 的 v-select 中添加一个条目
【发布时间】：2018-08-03 08:26:40
【问题描述】：

我想在 v-select 中添加项目。例如，我们在 v-select 中没有任何项目，并希望将其添加到外部。

 <v-select
  v-bind:label="Intelligence" 
  v-model="IntValues"
  multiple >
  </v-select>

当我们这样写时，我们只会得到空的选择列表，但是如何从外部向其中添加项目

这里是 IntValues:[],

或可编辑列表，如 TodoMVC

【问题讨论】：

v-bind:items?
@dfsq 如果我使用 v-bind: items 那么我必须用它绑定项目，在我的情况下，我有一个空列表，我想在其中添加一个项目。
很好的绑定意味着dom和你的变量是连接的。因此，每当您将某些内容推入数组时，它都会显示到 dom 中，就这么简单 :) 您只需将 push 项放入数组中；)
@AndreyPopov 我认为要将项目推送到数组中，我们需要一些可编辑的区域，我们可以在其中保存值然后推送它，但是当我单击 v-select 时，只需打开空列表现在我什至什么都写不出来了
正如文档中关于Selects 所写的那样 - 您必须提供items 和model - 第一个是可能选项的列表，而后者是您的选择。我认为提供的答案也解释了这一点

标签： vue.js vuejs2 vue-component vuetify.js

【解决方案1】：

new Vue({
  el: '#app',
  data() {
    return {
      selected: null,
      items: []
    }
  },
  methods: {
    fetchItems() {
      this.items = [
        "A1",
        "B2",
        "C3"
      ]
    }
  }
})

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify/dist/vuetify.min.js"></script>
<script src="https://unpkg.com/babel-polyfill/dist/polyfill.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet">
<link href="https://unpkg.com/vuetify@1.0.3/dist/vuetify.min.css" rel="stylesheet" />
<div id="app">
  <v-app id="inspire">
    <v-container fluid>
      <v-layout row wrap>
        <v-flex xs6>
          <v-subheader>Standard</v-subheader>
        </v-flex>
        <v-flex xs6>
          <v-select :items="items" v-model="selected" label="Select" single-line bottom></v-select>
        </v-flex>
        <div @click=fetchItems>FetchItems</div>
      </v-layout>
    </v-container>
  </v-app>
</div>

您可以稍后修改项目以更新值。您可以点击FetchItem进行测试，看看效果。

【讨论】：

不，我想动态地将值添加到列表中。我想向用户提供此功能以添加到下拉列表中
啊哈，你需要这样的东西：select2.org/tagging ??我认为使用 vuetify 是不可能的，您需要自己开发它。
@AndreyPopov 是的，更正 select2.org/tagging 之类的内容
目前无法通过 vuetify 实现，您的问题在某种程度上具有误导性:)

【解决方案2】：

Watcher 将完成您的工作，为您的模型添加一个观察者，并且每当它发生变化时，都会为您的项目增加价值。您可以参考这支笔，它使用具有自动完成功能的 v-combobox。 https://codepen.io/saurabhtalreja/pen/yLMyJmE

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      select: ['Vuetify'],
      items: [
        'Programming',
        'Design',
        'Vue',
        'Vuetify',
      ],
    }
  },
  watch:{
    select(val,prev){
      console.log('New Input Value is' ,val);
      console.log('Previous Value is' ,prev);
      console.log('Model is = New Input ie. ', this.select);
      console.log('Items Array is', this.items)
      this.items.push(val);
      console.log('New Items are', this.items)
    }
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.4.11/dist/vuetify.min.js"></script>



<div id="app">
  <v-app id="inspire">
    <v-container fluid>
      <v-row>
        <v-col cols="12">
          <v-combobox
            v-model="select"
            :items="items"
            label="Combobox"            
            outlined
            dense
          ></v-combobox>
        </v-col>
      </v-row>
    </v-container>
  </v-app>
</div>

【讨论】：

【解决方案3】：

如果您在名为values 的数组变量中有数据，则只需将其分配给IntValues。

即， this.IntValues = values;

如果您有一个对象，例如 value，则只需将其推送到 IntValues。即this.IntValues.push(value)。

【讨论】：