VueJS -如何在vue-select中使用API的响应

Question

我想在v-select中使用来自API的响应。下面是一个场景，我想使用从组件a到组件B的API调用，而不是在组件B中再次调用它。

组件:

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)
    }

组件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. 正如你可以看到我的组件B我硬编码为'香草'在v-select，而不是我想使用来自API的数据，我想知道它是如何做到的。

下面是我的Api响应:

[
      {
        "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",
      } 
      ...
]

2. 请帮帮我。我尝试使用label: type.flavor，但没有显示任何内容。为了使代码有效，我想使用来自组件A中的API调用的响应

Answer 1

只需在选项的位置添加一个变量，如下所示:

<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>

，你还需要修改你的API响应…响应:

[
      {
        "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"
      } 
      ...
]

当收到响应时，您需要修改来自服务器端或客户端的响应…

如果你不想修改你的json响应那么快，你需要添加2个额外的关键是标签&值键，以便可以使用…

Answer 2

我尝试使用:getOptionKey="getOptionKey"所以我可以改变默认的"id"Vue-select是请求的，但对我来说，唯一有效的想法是考虑对象属性&;value&;作为默认值。因此，由于我正在处理从API返回的对象数组，我所做的是:

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

并在html中使用以下内容:

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