CODEWITHSUNDEEP
javascriptvue.jsaxiosmulti-select
Geoff_S
Geoff_S

Reputation: 5105

Axios call on select/enter with Vue Multiselect

I have a functioning Vue Multiselect where I'm using an axios call to fill the options from my database values. This works perfectly and allows me to choose from existing options or enter new options in order to create tags.

As it is, this works perfectly. But I need a way, if possible, to make another Axios call every time the user selects and option or hits the enter key to save a tag option. Is there a way to do this?

This is my first experience with Vue and I'm really not sure how feasible this is, but basically I'm just wondering how to make an axios call every time a tag is selected or entered with the enter key

<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);
        }
      }
    })

Upvotes: 2

Views: 1351

Answers (1)

saccodd
saccodd

Reputation: 1067

Monitor @select event and trigger a function where your Axios call will happen.

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

...

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

...

Upvotes: 1

Related Questions