laravel 控制器中 vuejs 自动完成的结构对象答案

【问题标题】：Structure object for vuejs autocomplete in laravel controllerlaravel 控制器中 vuejs 自动完成的结构对象
【发布时间】：2020-03-11 02:00:41
【问题描述】：

我试图弄清楚为什么我的自动完成功能没有正确显示选项。首先，我在 axios 调用时从我的控制器发送这个硬编码数据：

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

我正在接受该响应并将其设置为我在 vue 中的 item 值。然后在模板中我访问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>

如何以不同的方式构造它，以便每个对象都是一个项目，我可以在模板中访问单独的标题和描述？

【问题讨论】：

标签： javascript php laravel vue.js

【解决方案1】：

在您的 SearchController 方法中，只需更改以下内容：

return json_encode($searchResults);

用这个：

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

【讨论】：