从函数中检索 JSON 和 PHP 值答案

【问题标题】：Retrieving both JSON and PHP values from a function从函数中检索 JSON 和 PHP 值
【发布时间】：2020-02-18 19:47:24
【问题描述】：

我正在使用来自Spatie 的laravel-searchable 包来帮助我在Laravel 应用程序中使用搜索功能。

我的SearchController.php 文件中有以下代码块：

public function searchCategories(Request $request) {
    $results = (new Search())
        ->registerModel(Category::class, ['title', 'id'])
        ->search($request->input('query'));

    return response()->json($results);
}

这些值是通过 vue.js 函数在 axios 的一些帮助下返回的：

if(document.getElementById("search-all")) {
    const app = new Vue({
        el: '#search-all',

        data() {
            return {
                query: null,
                results: [],
                isActive: false
            };

        },
        watch: {
            query(after, before) {
                this.searchAll();
                this.isActive = true;
            }
        },
        methods: {
            searchAll() {
                axios.get('/search', {params: {query: this.query}})
                    .then(response => this.results = response.data)
                    .catch(error => {
                    });
            }
        }

    });
}

然后我有触发vue.js 函数并检索HTML 的表单输入，如下所示：

<div v-if="results.length > 0 && query" class="results" v-bind:class="{ show : isActive}">
    <div class="row main-row">
        <div v-for="result in results.slice(0,10)" :key="result.id" class="col-lg-6">
            <a :href="result.url">
                <div class="card main-card result-card course-card">
                    <div class="course-card-content">
                        <h6 v-text="result.title"> </h6>
                        <hr>
                    </div>
                </div>{{-- CARD END--}}
            </a>
        </div><!-- COL-4 END-->
    </div><!-- ROW END-->
</div><!-- OVERVIEW END-->

一切正常，JSON 被检索并显示。但是，我需要PHP 变量中的一些功能，或者我希望能够在我的Blade 函数中使用JSON 数据。

我试图从我的searchCategories() 函数返回一个数组，如下所示：

public function searchCategories(Request $request) {
    $results = (new Search())
        ->registerModel(Category::class, ['title'])
        ->search($request->input('query'));

    $res = response()->json($results);

    return array($results, $res);
}

但是，我现在不知道如何检索JSON 数据。

总结：

我希望能够同时使用我的函数返回的PHP 变量和JSON 数据。

我想到的用法示例：例如，我的结果中有一个背景图片，如下所示：

<div class="course-image" style="background: url({{asset('./img/categories/ . $res->image_name')}});"></div>

这只能通过访问PHP 变量以及JSON 数据来实现（据我所知）。或者能够在我的 blade asset() 函数中使用这个 JSON 数据。

【问题讨论】：

{{ 不是 JSON - 那是 twig 语法（或者.. 它是 Laravel 的刀片吗？）
@treyBake 您可以对 twig 和 Blade 使用该语法。
为什么不编写适当的代码来增强返回的 JSON，使其包含您需要的一切？我没有从您的代码中得到您所说的“JSON 和 PHP 值”的含义，因为无论内容是直接来自数据酶还是来自重新计算的数据，结果都应该始终形成为 JSON /跨度>
@Daan 啊，没用过刀片 - 认为它更多基于@
@treyBake 你可以使用@{{ }} 来逃避刀片

标签： php json laravel vue.js

【解决方案1】：

为什么不请求图像名称或您需要的所有参数并将其余部分放在 js 部分，我认为如果您这样做会很容易。

public function searchCategories(Request $request) {
$results = (new Search())
    ->registerModel(Category::class, ['title', 'id', 'image_name'])
    ->search($request->input('query'));

return response()->json($results);
}

对于其他类似的部分

<div class="course-image" style="background: url({{asset('./img/categories/')}}result.image_name);">

我不知道 vue.js，但它应该可以工作，因为刀片会打印图像的基本路径，而 js 会打印其余的应该可以工作，你可以试试

【讨论】：

好的，但是如果您在公共文件夹中有存储图像，只需删除第一个 ./ yo get url({{asset('img/categories/')}} 如果这对您不起作用或者将您看到的背景 url 的路径发送给我，您可以在源代码中看到它

【解决方案2】：

经过多次试验和错误，人们在这里指出了正确的方向，我找到了解决方案：

我添加了一个额外的img_path var，它将图像路径的第一部分保存到我的vue.js 函数：

data() {
      return {
          query: null,
          results: [],
          isActive: false,
          img_path: 'img/categories/'
      };

},

然后我在 v-bind:style 中检索它，并使用结果的输出，如下所示：

<div class="course-image" v-bind:style="{ backgroundImage: 'url(' + img_path + result.image_name + ')' }"></div>

【讨论】：