Question

我正在尝试将具有输入的Jquery的自动完成功能转换为Vue多选。

我已经走了很多路，但是这里仍然有一些错误或不完善之处。我有一个包含页面上显示的multislect的基本div。然后，我有了一个vue实例，在该实例中，我正在调用我的Route（该路由成功命中，并在下面的控制器中触发了该函数）

我认为，我最大的问题是我不知道如何在ajax调用中使多选搜索充当我的查询，以便可以在vue实例中填充options。

我在这里想念什么/做错什么了吗？

HTML：

 <div id="app">
      <multiselect v-model="value" open-direction="bottom" :options="options" :multiple="true" :close-on-select="false" :taggable="true" :clear-on-select="false" :preserve-search="true" placeholder="Choose Option(s)" label="name" track-by="name">
          <template slot="selection" slot-scope="{ values, search, isOpen }"><span class="multiselect__single" v-if="values.length &amp;&amp; !isOpen">{{ values.length }} options selected</span></template>
      </multiselect>
  </div>

Vue：

let app = new Vue({
        components: {
            Multiselect: window.VueMultiselect.default
        },
        data () {
            return {
                selected: 'A',
                options: []
            }
        },
        methods:{
            pullEmployees(){

               $.ajax({
                    url:"{{ route('campaigns.search') }}",
                    method:"POST",
                    data:{query:query, _token: '{{ csrf_token() }}'},
                    success: results => this.options = results
                });
            }
        }
    }).$mount('#app');

控制器：

public function searchTags(Request $request)
{

    if($request->get('query'))
    {
      $query = $request->get('query');
      $data = CampaignTags::where('TAG_DATA', 'LIKE', "%{$query}%")->get();

      return $data;
    }
}

Answer 1

引起我注意的一件事是，您在ajax请求的成功函数中使用了success: results => this.options = results。一个常见的错误是，this在此特定上下文中不是引用vue实例，而是引用ajax请求。

所以可以使您更进一步的是预先创建对vue实例的显式引用：

pullEmployees() { 
   var vue = this; 
   $.ajax({
      url:"{{ route('campaigns.search') }}",
      method:"POST",
      data:{query:query, _token: '{{ csrf_token() }}'},
      success: results => vue.options = results
    });
  }

这至少应将您的vue实例options设置为ajax请求提供的results。

也许您可以进一步处理此信息。

在Laravel中对Vue多选选项进行Ajax调用

1 个答案: