CODEWITHSUNDEEP
vue.jsvuejs2vue-componentvuetify.js
JustStartedProgramming
JustStartedProgramming

Reputation: 327

Adding a entry in a v-select in vuetify

I want to add the items in a v-select. for example, we dont have any item in a v-select and want to add it extrenaly. 

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

When we write like this we will get only empty select list but how to add items into it externally

Here IntValues:[],

Or Editable list, like TodoMVC

Upvotes: 0

Views: 6885

Answers (3)

Saurabh Talreja
Saurabh Talreja

Reputation: 349

Watchers will do your work, add a watcher to your model and whenever it changes add value to your items. You can refer this pen, it is using v-combobox which is having power of autocomplete. 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/[email protected]/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/[email protected]/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>

Upvotes: 2

Rafeeque
Rafeeque

Reputation: 933

If you have data in an array variable named values, then just assign it to IntValues.

ie, this.IntValues = values;

If you have a single object say value, then just push it to the IntValues. ie, this.IntValues.push(value).

Upvotes: 0

Morty Choi
Morty Choi

Reputation: 2550

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/[email protected]/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>

You can modify the items later to update the value. You can test with clicking the FetchItem to see the effect.

Upvotes: 2

Related Questions