1

我想在 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>
  1. 如您所见，我在 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",
      } 

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

2 回答 2

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 个附加键，即标签和值键，以便您可以使用...

于 2021-01-15T13:40:57.613 回答
0

我尝试使用 :getOptionKey="getOptionKey" 所以我可以更改 vue-select 请求的默认“id”，但对我来说唯一可行的方法是将对象属性“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
                      />
于 2021-01-22T17:46:27.273 回答