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

Question

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

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

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

如您所见，我在 v-select 中将组件 B 硬编码为 'vanilla'，而我想使用来自 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",
      } 

      ...
]

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

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

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

VueJS - How can i use the response of API in vue-select

api

vue.js

vue-select