Блог

Главная - Вопросы по программированию - Вызов Axios при выборе / вводе с помощью Vue Multiselect

Вызов Axios при выборе / вводе с помощью Vue Multiselect

#javascript #vue.js #axios #multi-select

#javascript #vue.js #axios #множественный выбор

Вопрос:

У меня есть функционирующий Vue Multiselect, в котором я использую вызов axios для заполнения параметров из значений моей базы данных. Это отлично работает и позволяет мне выбирать из существующих параметров или вводить новые параметры для создания тегов.

Как бы то ни было, это работает отлично. Но мне нужен способ, если это возможно, выполнять другой вызов Axios каждый раз, когда пользователь выбирает опцию и или нажимает клавишу ввода, чтобы сохранить опцию тега. Есть ли способ сделать это?

Это мой первый опыт работы с Vue, и я действительно не уверен, насколько это возможно, но в основном мне просто интересно, как вызывать axios каждый раз, когда выбирается или вводится тег с помощью клавиши enter

 <div id="tagApp">
  <multiselect
  label="tag_data"
  track-by="campaign_tag_id"
  v-model="value"
  :options="options"
  :multiple="true"
  :taggable="true"
  @tag="addTag"
  @search-change="val => read(val)"
  :preselect-first="false"
  :close-on-select="false" 
  :clear-on-select="true" 
  :preserve-search="true" 
  tag-placeholder="Add this as new tag" 
  placeholder="Search or add a tag"
  ></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 = [];
          }
        },
        addTag(newTag) {
          const tag = {
            tag_data: newTag,
          };
          this.options.push(tag);
          this.value.push(tag);
        }
      }
    })

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

1. Какие у вас проблемы? Должно быть просто .. при выборе сделайте свой звонок или при добавлении тега сделайте свой звонок. Та же концепция, как работает автозаполнение.

2. Я думаю, я знаю, что могу поместить вызов axios в текущую функцию addTag после моего this.value. нажмите строку, но мне интересно, как это сделать при выборе?

3. Добавьте v-on:change атрибут в свой множественный выбор и сделайте свой вызов там

4. Итак, если я добавлю v-on: change и вызову axios, а затем также вызову axios в функции addTag, то будут ли они вводить и вводить новый или выбирать из списка автозаполнения, это вызовет новый вызов axios?

Ответ №1:

Отслеживайте событие @select и запускайте функцию, в которой будет выполняться ваш вызов Axios.

 <div id="tagApp">
  <multiselect
  ...
  @select= "callAxios"
  ...
  ></multiselect>
</div>
 
 ...

   methods: {
        callAxios: function(val){
            //your Axios call here
        },
        ...
   }

...
Метки: