Структура объекта для vuejs автозаполнения в laravel контроллере

Question

Я пытаюсь выяснить, почему в автозаполнении не отображаются параметры. Прежде всего, я отправляю эти жестко закодированные данные с моего контроллера при вызове ax ios:

searchController. php

$searchResults = [
        0 => (object) [
            'title' => '123',
            'description' => 'testing',
        ],
        1 => (object) [
            'title' => 'New one',
            'description' => 'testing',
        ],
        2 => (object) [
            'title' => 'One More',
            'description' => 'testing',
        ],
    ];

    return json_encode($searchResults);

Я принимаю этот ответ и настройку это к моему item значению в vue. Затем в шаблоне я получаю доступ к item.title, но он просто показывает весь блок как один элемент, такой как

[
        0 => (object) [
            'title' => '123',
            'description' => 'testing',
        ],
        1 => (object) [
            'title' => 'New one',
            'description' => 'testing',
        ],
        2 => (object) [
            'title' => 'One More',
            'description' => 'testing',
        ],
    ]

Остальная часть кода:

<template>
    <div>
        <autocomplete :items="items" v-model="item" :get-label="getLabel" :component-item='template' @update-items="getSearch">
        </autocomplete>
        <div style="background-color: white;">
        <h2>{{ item.title }}</h2>
        </div>
    </div>
</template>

<script>
import Autocomplete from 'v-autocomplete';
import 'v-autocomplete/dist/v-autocomplete.css';

Vue.component('autocomplete', Autocomplete);

export default {
  data () {
        return {
            item: [],
            items: [],
        }
  },
  methods: {
    getLabel (item) {
      return item.name
    },
    getSearch() {
      axios.get('/search')
      .then(response => {

        this.item = response.data;
        console.info(this.item);

      })
      .catch(function(error) {
        this.loading = false;
        // handle error
        console.log(error)
      })
      .finally(function() {
        this.loading = false;
      })
    },

  }
};
</script>

Как я могу структурировать это по-разному, чтобы каждый объект представлял собой один элемент, в котором я могу получить доступ к отдельному заголовку и описанию в моем шаблоне?

Answer 1

В вашем SearchController методе просто измените это:

return json_encode($searchResults);

с этим:

return response()->json($searchResults);