Vue автозаполнение в Laravel

Question

Я работаю над проблемой с функцией автозаполнения vue на сайте laravel.

Я установил свой маршрут, контроллер и лезвие. В настоящее время, если я проверяю компонент vue и вводлю ввод, он показывает ключевые слова, которые я печатаю в консоли, поэтому я знаю, что он ловит то, что я печатаю.

Что касается $ groupResult в моем контроллере, то, если я просто выведу его на свою страницу, он выдаст около 100 результатов, как и ожидалось. Все, что я хочу сделать, это иметь автозаполнение на входе, который ищет в этих 100 результатах.

Что именно мне здесь не хватает?

Маршрут

Route::get('campaigns/categories','CampaignsController@searchcategories')->name('campaigns.categories');

Контроллер:

public function searchcategories(Request $request)
{
    $userNum = $this->user;
    $category = new categoryService();
    $safecategories = $category->info($userNum);

    $groupResult = array();

    foreach($safecategories->categories as $categories){
        $groupItem = array();
        $groupItem["group_code"] = $categories->group_code;
        $groupItem["group_name"] = $categories->group_name;

        array_push($groupResult, $groupItem);
    }

     return view('campaigns')
        ->with('groupResult', $groupResult);

}

Клинок

<div id="categoryNames">
<input type="text" v-model="keywords">
<ul v-if="results.length > 0">
  <li v-for="result in results" :key="result.id" v-text="result.name"></li>
</ul>
</div>

var categoryNames = new Vue({
  data() {
    return {
      keywords: null,
      results: []
    };
  },

  watch: {
    keywords(after, before) {
      this.fetch();
    }
  },

  methods: {
    fetch() {
      axios.get('campaigns/categories', { params: { keywords: this.keywords } })
        .then(response => this.results = response.data)
        .catch(error => {});
    }
  }
}).$mount('#categoryNames');

Answer 1

Если вы просто пытаетесь отфильтровать существующие результаты, вам не нужно вызывать сервер для этого.

<div id="categoryNames">
<input type="text" v-model="keywords">
<ul v-if="filteredResults.length > 0">
  <li v-for="result in filteredResults" :key="result.id" v-text="result.name"></li>
</ul>
</div>

var categoryNames = new Vue({
  data() {
    return {
      keywords: null,
      results: []
    };
  },

  computed: {
    filteredResults () {
      return this.keywords ? this.results.filter(row => row.name.search(new RegExp(`${this.keywords}`, 'i')) !== -1) : this.results
    }
  }
}).$mount('#categoryNames');

Свойство computed возвращает массив объектов (я предположил, что вы фильтруете по имени ключа объекта). Если ключевое слово присутствует, оно использует регулярное выражение для выполнения поиска без учета регистра. Если ключевое слово отсутствует, оно возвращает полный объект результатов.

Обратите внимание, я не тестировал этот код напрямую, поэтому возможна опечатка и т. Д. Но я реализовал много версий этого в крупномасштабном приложении.