Как отфильтровать товары по категории?

Ваш способ работает но только в статическом виде.
Я пробовал сделать так:

public function __invoke(Request $request)
    {
        $products = Product::whereHas('categories', function ($query){
        $data = $request->only('category_id');
            $query->where('title', $data['category_id']);
        })->with('categories')->get();

        return view('product.index', compact('products'));
    }

Хотел сделать код динамическим но появляется ошибка "Undefined variable: data"
так как внутри запроса не видно $request. Как я могу исправить это?

Как передать изображение через форму, где фронт это vue js(vuex),a бэк-Laravel?

Это компонент создания и отображения комментариев

<template>
    <div class="row">
        <form @submit.prevent="submit_form()" v-if="!commentSuccess">
            <div class="mb-3">
                <label for="commentSubject" class="form-label">Тема комментария</label>
                <input type="text" class="form-control" id="commentSubject" v-model="subject">
                <div class="alert alert-warning" role="alert" v-if="errorMessage.subject">
                    {{errorMessage.subject[0]}}
                </div>
            </div>
            <div class="mb-3">
                <label for="commentBody" class="form-label">Комментарий</label>
                <textarea rows="3" id="commentBody" class="form-control" v-model="body"></textarea>
                <div class="alert alert-warning" role="alert" v-if="errorMessage.body">
                    {{errorMessage.body[0]}}
                </div>
            </div>
            <div ref="dropzone" class="btn d-block p-5 bg-dark text-center text-light">
                Upload
            </div>
            <button class="btn btn-success" type="submit">Отправить</button>
        </form>
        <div class="alert alert-success" role="alert" v-else>
            Комментарий успешно отправлен!
        </div>
        <div class="toast-container pb-5 mt-5 mx-auto" style="min-width: 100%;" v-for="comment in comments">
            <div class="toast showing" style="min-width: 100%">
                <div class="toast-header">
                    <img src="https://via.placeholder.com/50/5f113b/ffffff/?text=User" class="rounded me-2" alt="">
                    <strong class="me-auto">{{comment.subject}}</strong>
                    <small class="text-muted">{{comment.created_at}}</small>
                </div>
                <div class="toast-body">
                    {{comment.body}}
                </div>
            </div>
        </div>
    </div>

</template>
<code lang="javascript">
<script>
export default {
    data() {
        return {
            subject: '',
            body: ''
        }
    },
    computed: {
        comments() {
            return this.$store.state.article.article.comments;
        },
        commentSuccess() {
            return this.$store.state.article.commentSuccess;
        },
        errorMessage() {
            return this.$store.state.article.errors;
        }
    },
    methods: {
        submit_form() {
            this.$store.dispatch('article/addComment', {
                subject: this.subject,
                body: this.body,
                article_id: this.$store.state.article.article.id,
            })

        },
    },
  }
</script>

</code>

а это хранилище

import axios from "axios";

export  const namespaced = true

export const state = {
    articles:[],
    article: {
        comments: [],
        tags: [],
        statistic: {
            likes: 0,
            views: 0
        }
    },
    slug:'',
    likeIt: true,
    commentSuccess:false,
    errors: []
}

export const actions = {
  getArticleData(context, payload) {
        axios.get('/api/article-json', {params: {'slug':payload}}).then((response) => {
            context.commit('SET_ARTICLE', response.data.data);
        }).catch(() => {
            console.log('Ошибка');
        })
    },
    addComment(context,payload){
        axios.post('/api/article-add-comment', {subject:payload.subject, body:payload.body,article_id:payload.article_id}).then((response)=>{
            context.commit('SET_COMMENT_SUCCESS', !state.commentSuccess);
            context.dispatch('getArticleData', context.rootState.slug)
        }).catch((error)=>{
            if (error.response.status === 422) {
                context.state.errors = error.response.data.errors;
            }
        })
    },
  }
}

export const getters = {
    getArticles(state){
        return state.articles
    },
 
}

export const mutations = {
    SET_STATE(state, payload){
        return state.articles = payload;
    },
    SET_ARTICLE(state, payload) {
        return state.article = payload;
    },
    SET_COMMENT_SUCCESS(state,payload){
        state.commentSuccess = payload;
    }
}

Какая php команда отображает список всех поддоменов?

Понял. Значит я шел не по правильной дороге и надо искать другой способ решения. Спасибо.

Какая php команда отображает список всех поддоменов?

Этот сайт для того и создан что бы приходить с вопросами на которые не знаешь ответа. И мне кажется я пришел именно в то место. А если ты не знаешь тоже то иди себе дальше.

Как можно присвоить поддомен?

А можно чуток детальнее?
У меня логика проекта такая.
Когда через круд в админ-панеле создаёшь свой лендинг Пейдж то все твои пожелания (title,title2, image, test1(поддомен) ) сохраняются в БД , в таблице lendidg как обычная строка.
Как мне использовать эту строку с названием поддомена?
В Роутах через условие?
Извиняюсь за возможно глупые вопросы) Я исправлюсь.

Как можно присвоить поддомен?

А для для проекта который на данный момент локальный есть решение?

Как можно присвоить поддомен?

Этот способ подходит для локально проекта? Я через Open Server делаю.