Получение значений JSON и PHP из функции

Question

Я использую пакет laravel-searchable из Spatie, чтобы помочь мне с поиском в моем приложении 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, или я хочу иметь возможность использовать данные JSON внутри моих функций Blade.

Я пытался вернуть массив из моей 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. Или возможность использовать эти JSON данные в моей функции blade asset().

Answer 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, но он должен работать, потому что blade-сервер напечатает базовый путь для изображения, а js напечатает остальное, что должно работать, вы можете попробовать его

Answer 2

После долгих проб и ошибок, когда люди указывали мне правильное направление, я нашел решение:

Я добавил дополнительный img_path var, который содержит первую часть пути к моему * 1004. * function:

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>