Выполнение вызова Ajax для нескольких вариантов Vue в Laravel

Question

Я пытаюсь преобразовать функцию автозаполнения из Jquery со входом в множественный выбор Vue.

Я в основном там, но у меня все еще есть ошибки или неполадки где-то здесь. У меня есть базовый div с мультиспектом, который показан на странице. Затем у меня есть экземпляр vue, в котором я делаю вызов своему маршруту (маршрут успешно пройден, и запускается функция в моем контроллере ниже)

Моя самая большая проблема, я полагаю, в том, что я понятия не имею, как заставить поиск с несколькими выборками действовать как мой запрос в вызове ajax, чтобы я мог заполнить свой options в экземпляре vue.

Что я здесь упускаю / делаю неправильно?

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>

Вю:

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

Одна вещь, которая привлекает мое внимание, это то, что вы используете success: results => this.options = results в своей функции успеха для запроса ajax. Одна распространенная ошибка заключается в том, что 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 значение results, предоставленное запросом ajax.

Может быть, вы можете продолжить эту информацию.