2

I want to use the response coming from the API in v-select. Here is a scenario i want to use the API call from component A to component B, rather than calling it again in the component B.

Component A:

methods: {
      forVselect (id) {
          this.$http.get(`/type/${id}`)
            .then((res) => {
              this.icecream = res.data})
            .catch((e) => {console.log(e)})
        }
      },
    mounted (){
      this.forVselect (this.$route.params.un_id)
    }

Component B:

<template>
  <div class="The V-select">
    <vselect v-model="input1" :options="[{label: 'Vanilla' , value: 'vanilla'}]" :dir="$vs.rtl ? 'rtl' : 'ltr'" />
  </div>
</template>

<script>
import vselect from 'vue-select'
...
input1: null,
icecream: null
...
methods: {
  forVselect (id) {
      this.$http.get(`/type/${id}`)
        .then((res) => {
          this.icecream = res.data})
        .catch((e) => {console.log(e)})
    }
  },
mounted (){
  this.forVselect (this.$route.params.un_id)
}
</script>
  1. As you can see my Component B i have hard coded as 'vanilla' in v-select, rather i want to use the data coming from the API, i want to know how it can be done.

Here is my Api response:

[

      {
        "id": 3,
        "flavor": "vanilla",
        "price": "150",
        "taste": "super",
        "cream": "high",
        "investments": null,
      },
      {
        "id": 8,
        "flavor": "chocolate",
        "price": "250",
        "taste": "super high",
        "cream": "fantastic",
        "investments": "too high",
      } 

      ...
]
  1. Please do help me. I tried just by using label: type.flavor but nothing was displayed. And in order to make code effective i want to use the response coming from API call made in component A
Quantum
  • 268
  • 5
  • 23

2 Answers2

2

use just have to add a variable at the place of option as shown below:

<template>
  <div class="The V-select">
    <vselect v-model="input1" :options="icecream" :dir="$vs.rtl ? 'rtl' : 'ltr'" />
  </div>
</template>

<script>
import vselect from 'vue-select'
...
input1: null,
icecream: null
...
methods: {
  forVselect (id) {
      this.$http.get(`/type/${id}`)
        .then((res) => {
          this.icecream = res.data})
        .catch((e) => {console.log(e)})
    }
  },
mounted (){
  this.forVselect (this.$route.params.un_id)
}
</script>

and also you need modify your api response... response like:

[

      {
        "id": 3,
        "flavor": "vanilla",
        "price": "150",
        "taste": "super",
        "cream": "high",
        "investments": null,
        "label": "Vanilla" ,
        "value": "vanilla"
      },
      {
        "id": 8,
        "flavor": "chocolate",
        "price": "250",
        "taste": "super high",
        "cream": "fantastic",
        "investments": "too high",
        "label": "Chocolate" ,
        "value": "chocolate"
      } 

      ...
]

you need to modify response like that from server side or client side when response received...

If you don't want to modify your json response so atleat you need to add 2 additional key which is label & value key so that you can use...

Parth Parekh
  • 146
  • 6
  • 2
    Thank you @Parth Parekh, your answer is absolutely fine but, i want to show it from my response itself because, i am using the same response to show other things so i cannot change the response. I want to know two things here, how i can use the response from Component A in the vue-select which is in the component B. You can tell me how below your current answer. Please do help me. – Quantum Jan 15 '21 at 13:51
  • @build___ i just edit my answer please check it... if you dont want to modify json response.. so you need to create one method which is help to add 2 key in the response which is Label & Value... so that you can use... – Parth Parekh Jan 15 '21 at 14:44
  • Currently, i dont have access of changing the response, so i want to use what ever response i am getting from the API. So please let me know how i can do that in my case. I want to know two things here, how i can use the response from Component A in the vue-select which is in the component B. You can tell me how below your current answer. Please do help me. – Quantum Jan 15 '21 at 17:05
  • @build___ you can pass data between components by using props... you can refer this link: https://vuejs.org/v2/guide/components.html – Parth Parekh Jan 15 '21 at 18:46
  • @build___ and vue select can only take data from json when key is label and value... so you need to copy the data to other variable and modify in the respective format... – Parth Parekh Jan 15 '21 at 18:48
0

I tried to use :getOptionKey="getOptionKey" so I could change the default "id" vue-select was requesting but to me the only think that worked is to consider the object attribute "value" as the default. So since I was working with array of objects being returned from API, what I did was:

    // loading from API
    dataUtils.find(this.$route.params.id).then((data) => {
      this.mySelectObject = {
        name: data.name,
        value: data.id
      }

and used the following within html:

<v-select
                        label="name"
                        :options="myOptions"
                        v-model="mySelectObject"
                        @input="setSelected" //created this method to change selection
                      />
Ricardo Gil
  • 11
  • 2