Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/vue.js/6.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 使用Vue Multiselect在选择/输入时调用Axios_Javascript_Vue.js_Axios_Multi Select - Fatal编程技术网

Javascript 使用Vue Multiselect在选择/输入时调用Axios

Javascript 使用Vue Multiselect在选择/输入时调用Axios,javascript,vue.js,axios,multi-select,Javascript,Vue.js,Axios,Multi Select,我有一个功能正常的Vue Multiselect,在这里我使用axios调用来填充数据库值中的选项。这非常有效,允许我从现有选项中选择或输入新选项以创建标记 事实上,这是完美的。但是,如果可能的话,我需要一种方法,在用户每次选择和选项或点击enter键保存标记选项时,再次调用Axios。有办法做到这一点吗 这是我第一次使用Vue,我真的不确定这是否可行,但基本上我只是想知道如何在每次选择标记或使用enter键输入标记时进行axios调用 <div id="tagApp"> <

我有一个功能正常的Vue Multiselect,在这里我使用axios调用来填充数据库值中的选项。这非常有效,允许我从现有选项中选择或输入新选项以创建标记

事实上,这是完美的。但是,如果可能的话,我需要一种方法,在用户每次选择和选项或点击enter键保存标记选项时,再次调用Axios。有办法做到这一点吗

这是我第一次使用Vue,我真的不确定这是否可行,但基本上我只是想知道如何在每次选择标记或使用enter键输入标记时进行axios调用

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

监视@select事件并触发一个函数,您的Axios调用将在该函数中发生

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

你有什么问题?应该很简单。。在选择拨打电话时,或在标签上添加拨打电话。autocomplete工作原理相同。我想我知道我可以在this.value.push行之后的当前addTag函数中调用axios,但我想知道如何在选择时执行此操作?将v-on:change属性添加到您的multi-select并在其中进行调用OK,因此如果我添加v-on:change并调用axios,然后在addTag函数中也调用axios,那么无论他们键入并输入新的属性,还是从自动完成列表中选择,都将生成新的axios呼叫
...

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

...