Блог

Главная - Вопросы по программированию - VueJS — Как я могу использовать ответ API в vue-select

VueJS — Как я могу использовать ответ API в vue-select

#api #vue.js #vue-select

#API #vue.js #vue-select

Вопрос:

Я хочу использовать ответ, поступающий от API в v-select. Вот сценарий, в котором я хочу использовать вызов API из компонента A в компонент B, а не вызывать его снова в компоненте 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. Как вы можете видеть, мой компонент 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",
      } 

      ...
]
  1. Пожалуйста, помогите мне. Я пытался просто использовать label: type.flavor , но ничего не отображалось. И для того, чтобы сделать код эффективным, я хочу использовать ответ, поступающий от вызова API, выполненного в компоненте A

Ответ №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 дополнительных ключа, которые являются ключом label amp; value, чтобы вы могли использовать…

Комментарии:

1. Спасибо @Parth Parekh, ваш ответ абсолютно хорош, но я хочу показать его из самого моего ответа, потому что я использую тот же ответ, чтобы показать другие вещи, поэтому я не могу изменить ответ. Здесь я хочу знать две вещи: как я могу использовать ответ от компонента A в vue-select, который находится в компоненте B. Вы можете рассказать мне, как ниже вашего текущего ответа. Пожалуйста, помогите мне.

2. @build___ я просто редактирую свой ответ, пожалуйста, проверьте его … если вы не хотите изменять ответ json .. поэтому вам нужно создать один метод, который поможет добавить 2 ключа в ответ, который является Label amp; Value… чтобы вы могли использовать…

3. В настоящее время у меня нет доступа к изменению ответа, поэтому я хочу использовать любой ответ, который я получаю от API. Поэтому, пожалуйста, дайте мне знать, как я могу это сделать в моем случае. Здесь я хочу знать две вещи: как я могу использовать ответ от компонента A в vue-select, который находится в компоненте B. Вы можете рассказать мне, как ниже вашего текущего ответа. Пожалуйста, помогите мне.

4. @build___ вы можете передавать данные между компонентами с помощью реквизитов… вы можете перейти по этой ссылке: vuejs.org/v2/guide/components.html

5. @build___ и vue select могут принимать данные из json только тогда, когда ключ является меткой и значением… итак, вам нужно скопировать данные в другую переменную и изменить в соответствующем формате…

Ответ №2:

Я попытался использовать:getOptionKey=»getOptionKey», чтобы я мог изменить «идентификатор» по умолчанию, который запрашивал vue-select, но для меня единственное, что сработало, — это рассмотреть атрибут объекта «значение» по умолчанию. Итак, поскольку я работал с массивом объектов, возвращаемых из 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
                      />
Метки: