Laravel + Vuejs复选框过滤器

如何解决Laravel + Vuejs复选框过滤器

我有一个 Laravel + Vuejs 项目。我创建了一个复选框搜索过滤器，并希望单击一个复选框时更新URL，但是当我单击任何一个复选框时，使用此复选框值更新的URL仅没有旧值，并且在重新加载页面后不选中该复选框。

这是我的HTML模板

@foreach($food_categs as $categ)
    @if(App::getLocale()=='ar')
        <v-checkbox @change="categoryFilter()"
                    class="categ" color="primary"
                    id="{{$categ->name}}"
                    name="{{$categ->name_en}}"
                    value="{{$categ->name_en}}"
                    @if(in_array($categ->name_en,$category_keywords)) input-value="true" aria-checked="true" @endif
                    v-model="search_categ" label="{{$categ->name}}"></v-checkbox>
    @else
        <v-checkbox @change="categoryFilter()"
                    class="categ"
                    color="primary"
                    id="{{$categ->name_en}}"
                    name="{{$categ->name_en}}"
                    value="{{$categ->name_en}}"
                    @if(in_array($categ->name_en,$category_keywords)) input-value="true" aria-checked="true" @endif
                    v-model="search_categ" label="{{$categ->name_en}}"></v-checkbox>
    @endif
@endforeach

这是我的vue.js脚本

<script>
    Vue.component('filter-panels',{
        template: '#filter-panels',data() {
            return {
                panel: [],lang: document.documentElement.lang.substr(0,2),search_categ: [],searchcusines: '',budget: '',url: window.location.href,urlParams: [],queryVars: '',onlineReserve: '',}
        },computed: {
            baseurl: function () {
                return (this.url.split("?")[0])
            },resturl: function () {
                return (this.url.split("?")[1])
            }
        },created() {
            let vApp = this;

            window.location.search.replace("?","").split("&").forEach(function (e,i) {
                let p = e.split("=");
                vApp.urlParams[p[0]] = p [1];
            })

        },methods: {
            // Reset the panel
            none() {
                this.panel = []
            },//update query string value
            updateQueryStringParameter(uri,key,value) {
                let re = new RegExp("([?&])" + key + "=.*?(&|$)","i");
                let separator = uri.indexOf('?') !== -1 ? "&" : "?";

                if (uri.match(re)) {
                    return uri.replace(re,'$1' + key + "=" + value + '$2');
                } else {
                    return uri + separator + key + "=" + value;
                }
            },//appendquerystring to to url
            appendQueryString(url,queryVars) {
                let firstSeperator = (url.indexOf('?') == -1 ? '?' : '&');
                let queryStringParts = new Array();

                for (let key in queryVars) {
                    queryStringParts.push(key + '=' + queryVars[key]);
                }

                queryString = queryStringParts.join('&');
                return url + firstSeperator + queryString;
            },categoryFilter() {
                let vApp = this;
                let new_url

                if (vApp.urlParams["category"]) {
                    new_url = vApp.updateQueryStringParameter(vApp.url,'category',vApp.search_categ);
                    console.log('this is updateQueryStringParameter function')
                } else {
                    vApp.queryVars = {'category': vApp.search_categ};
                    new_url = vApp.appendQueryString(vApp.url,vApp.queryVars);
                    console.log('this is appendQueryString function')
                }

                console.log(vApp.urlParams)
                console.log(vApp.url)
                console.log(vApp.search_categ)
                console.log(vApp.queryVars)
                console.log(new_url)
                console.log(document.querySelectorAll('.categ input[input-value="true"]').defaultValue)

                window.location.replace(new_url);
            }
        }
    });
</script>

出什么问题了？ 请帮助，在此先感谢