how to pass value in v-select in vue

Question

i m new to vue (version 2.5) in my project i had install v-select i go through document and got confuse on few thing here is my code

  <template>
   <div class="wrapper">


             <div class="row">
               <div class="col-sm-6">
                 <div class="form-group">
                   <label for="name">Category</label>
                   <v-select  label="category_desc" options="category"></v-select>
                 </div>
               </div>
          </div>
  <button type="button" variant="primary" class="px-4" @click.prevent="next()">next</button>
       </div>
 </template>     

 <script>
   export default {
     name: 'Addproduct',
    data () {
             return {

                 category:[]


             }
           },
     mounted() {
             this.$http.get('http://localhost:3000/api/categories') .then(function (response) {
                 console.log(response.data);
                this.category=response.data

                 })
                 .catch(function (error) {
                   console.log("error.response");
                 });
         },

method:{ next(){ // console.log('value of v-selection not option' ) eg id 1 has 'country' so i want id 1 in method next() i.e in console.log } } now my problem is that how i can pass this axios responded success value to v-select option and second this how i can get selected value of v-select for eg;- when user click on next button how i can get which value is selected in v-select

score 3 · Accepted Answer · edited Dec 12 '19 at 14:52

3

You need to bind options to category. i.e. v-bind:options or short hand :options I would also suggest you use a method to make your ajax call, and then call the method in mounted() instead. Also you probably want a v-model on that select so I added that in the example.

First in your template...

 <v-select  v-model="selectedCategory" label="category_desc" :options="category"></v-select>

Then in your script definition...

data(){
   return{
     category:[],
     selectedCategory: null,
   }
},
methods:{
    getCategories(){
      this.$http.get('http://localhost:3000/api/categories')
           .then(function (response) {
               this.category=response.data
             }.bind(this))
           .catch(function (error) {
               console.log("error.response");
            });
  }
},
 mounted(){
   this.getCategories(); 
 }

Here is a working jfiddle https://jsfiddle.net/skribe/mghbLyva/3/

edited Dec 12 '19 at 14:52

Matt Gibson

14,616
7
47
79

answered Mar 14 '18 at 08:35

skribe

3,595
4
25
36

your code working fine but if i add ajax response then it stop working this.$http.get('http://localhost:3000/api/categories') .then(function (response) { console.log(response.data); // this.category=response.data this.category=[response.data]; }) .catch(function (error) { console.log("error.response"); }); i.e not output – Rocky Mar 14 '18 at 09:11
thanks that working i just add var _this=this outside ajax and then inside ajax _this.category=[response.data] – Rocky Mar 14 '18 at 09:19
1

Sorry if that was unclear. I suggest you use `.bind(this)` to get `this` into scope as it is cleaner. See my edit above. If my answer helped please consider marking it as the accepted answer. – skribe Mar 14 '18 at 09:40

bbsimonbb · Answer 2 · 2018-03-14T08:32:45.570

0

Are we talking about this select component? The simplest usage is to put a v-model attribute on your v-select. Then this variable will automatically reflect the user selected value.

If you need to specify options, which you might, then you also need to provide a value prop and listen for @change.

edited Mar 14 '18 at 08:32

answered Mar 14 '18 at 08:22

bbsimonbb

27,056
15
80
110

v-model select add in v-select it throw error select not define can you show me some example in new so i got confuse – Rocky Mar 14 '18 at 08:30

how to pass value in v-select in vue

2 Answers2