Вызов Axios, получение данных ответа в select options с помощью vue

#javascript #laravel #vue.js #axios

Вопрос:

Все, что я пытаюсь здесь сделать, это выяснить, как привязать значения данных ответа к моему мультиселекту options , но я не могу понять, что я делаю неправильно.

Журнал консоли правильно отображает мои возвращенные результаты, поэтому я знаю, что они возвращаются, но я не знаю, как связать их с моими параметрами множественного выбора.

Например, если я ввожу ‘Day’ в свой multiselect, мой вызов axios выполняет функцию автозаполнения и получает соответствующие параметры, чтобы моя консоль отображала:

  0:
    tag_id:  "1001"
    tag_data: "First Day"
 1:
    tag_id:   "1002"
    tag_data: "Second Day"

Итак, как я могу получить эти возвращаемые значения в свои параметры?

   <div id="tagApp">
      <multiselect
      v-model="value"
      :options="options"
      :loading="loading"
      :multiple="true"
      :taggable="true"
      @search-change="val => read(val)"
      ></multiselect>
  </div>

new Vue({
      components: {
        Multiselect: window.VueMultiselect.default
      },
      el: "#tagApp",
      data() {
        return{
            value: [],
            loading: false,
            options: []
        }

      },
      methods: {
        read: function(val){
            //console.log('searched for', val);
          if (val) {
            this.loading = true;
            this.options = [];

            const self = this;
            console.log(val);

            axios.get('campaigns/search',{params: {query: val}})
                .then(function (response) {
                    self.options = response.data;
                    console.log(response.data);
            });

          } else {
            this.options = [];
          }
        }
      }
    })

1. Какой формат ответа. данные поступают как? json?

2. Извините, да, это JSON

3. Можете ли вы показать мне компонент multiselect ? Чего он ожидает от своих опций? Список строк?

4. Компонент multiselect в настоящее время находится в коде. Он ожидает строковые данные из объекта JSON, да

Ответ №1:

Поскольку вы используете объекты в качестве опций, вам нужно будет передать label track-by свойства и компоненту multiselect . Смотрите Документы здесь

 <multiselect
  v-model="value"
  label="tag_data"
  track-by="tag_id"
  :options="options"
  :loading="loading"
  :multiple="true"
  :taggable="true"
  @search-change="val => read(val)"
></multiselect>

1. Спасибо, я не понимал, что это было необходимо для этого, но это имеет смысл. Единственный вопрос: теперь кажется, что как только я выбираю тег, а затем выбираю другой, все теги очищаются. По сути, создание тега учитывает все выбранные. Понятно ли в моем коде, почему это происходит?

2. На самом деле, неважно, что это работает сейчас. Однако это не позволяет создавать новый тег

Ответ №2:

Вам нужно добавить label свойство, а также track-by свойство. В моем примере title это свойство объекта, которое я использую как options , поэтому вам нужно будет использовать имя свойства, которое существует в массиве, который вы используете как options ..

Зеркало CodePen: https://codepen.io/oze4/pen/ROVqZK?editors=1010

 Vue.component("multiselect", window.VueMultiselect.default);

new Vue({
  el: "#app",
  data: {
    value: [],
    options: []
  },
  mounted() {
    var self = this;
    axios
      .get("https://jsonplaceholder.typicode.com/todos?_start=1amp;_end=10")
      .then(response => {
        self.options = response.data;
      })
      .catch(error => {
        alert(error);
      });
  }
});

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script src="https://unpkg.com/vue-multiselect@2.1.0/dist/vue-multiselect.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-multiselect@2.1.0/dist/vue-multiselect.min.css">

<div id="app">
  <label class="typo__label">Simple select / dropdown</label>
  <multiselect 
    v-model="value" 
    :height="300"
    :options="options" 
    :multiple="true" 
    :close-on-select="false" 
    :clear-on-select="false" 
    :preserve-search="true" 
    placeholder="Pick some" 
    label="title" 
    track-by="title" 
    :preselect-first="false"
  >
    <template slot="selection" slot-scope="{ values, search, isOpen }"><span class="multiselect__single" v-if="values.length amp;amp;amp;amp; !isOpen">{{ values.length }} options selected</span></template>
  </multiselect>
  <pre class="language-json"><code>{{ value }}</code></pre>
</div>