Вам нужно внести свой код app.js
в блейд-файл, иначе вы не сможете получить доступ к полям данных. Получив код app.js
, создайте поле data
sCat: ''
. Затем в вашем card-component
используйте оператор if
, чтобы увидеть, равна ли текущая категория sCat или sCat нулю. Например:
<card-component title={{$data->title}} description={{$data->description}} category={{$data->category}} v-if="(sCat == {{$data->category}} || sCat === '')"></card-component>
Лучше было бы создать компонент master
и поместить все, что у вас есть, под div id="app"
, в компоненте master
. Таким образом, вы будете лучше контролировать свои коды Vue.
Подход 1:
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
@include('includes.header')
<body>
<div id="app" class="wrapper">
<nav-component></nav-component>
<header-component></header-component>
<header-sidebar-component></header-sidebar-component>
<div class = "container">
<div class="row">
@foreach ($sortedData as $data)
<card-component title={{$data->title}} description={{$data->description}} category={{$data->category}}></card-component v-if="(sCat == {{$data->category}} || sCat === '')">
@endforeach
</div>
</div>
</div>
<script src="/js/app.js"></script>
//Move your vue instance from app.js to here as below
<script>
new Vue({
el: "#app",
data: {
sCat: '',
...
}
....
});
</script
</body>
</html>
Подход 2 (рекомендуется):
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
@include('includes.header')
<body>
<div id="app" class="wrapper">
<master card-items="{{ $data }}">
</div>
<script src="/js/app.js"></script>
</body>
</html>
template
<nav-component></nav-component>
<header-component></header-component>
<header-sidebar-component></header-sidebar-component>
<div class = "container">
<div class="row">
<div class="col-x-y" v-for="item in items"> //add some column values if needed or use plain div
<card-component :title="item->title" :description="item->description" :category="item->category" v-show="(sCat === item->category || sCat === '')"></card-component>
</div>
</div>
script
import NavComponent from 'pathToNavComponent.js';
//import other components
props: {
items: Array
}
components: {
NavComponent,
... //other components imported
}
data: {
sCat: '',
...
}
...
Давайте запустимся с определения
maxrequests: How many requests does a child server before being killed and a new one forked maxspare : Maximum number of spare processes to keep running minspare : Minimum number of spare processes to prefork maxchildren: Hard limit number of processes in prefork mode
Это означает, что Вы будете иметь при большинстве процессов maxchildren, работающих в любой момент времени в Вашем веб-сервере, каждый работающий за запросами maxrequests. В сервере запускаются, Вы получите процессы minspare, которые будут продолжать расти до maxspare (или maxchildren), если больше запросов прибудет.
Так, minspare позволяет Вам сказать, сколько параллельных запросов - Вы ожидающий как минимум (важный для предотвращения создания процесса, если Вы запускаете с одного, хорошо запуститься в, сказать 10), и maxspare позволяет Вам сказать, к скольким параллельные запросы будут Ваш сервер проявлять внимание самое большее (не идя на компромисс, это ожидало время отклика и так далее. Нуждается в стресс-тесте для проверки). И maxrequests говорит о времени жизни каждого ребенка, в случае, если они не могут работать навсегда ни из-за какого вида ограничения.
Не забывайте координировать свои fcgi настройки с Вашими апачскими настройками рабочего. Я обычно имею в наличии больше апачских рабочих, чем fcgi рабочие... они - более легкий вес и будут ожидать доступного fcgi рабочего к свободному для обработки запроса, если параллелизм достигает выше, чем мой maxspare.