vue js即使在頁面刷新后也保持下拉選擇的值

Question

我有一個下拉列表，當用戶選擇一個值時，它會推送到 URL。 現在，如果用戶刷新頁面，則默認情況下應選擇下拉值（如果它在 URL 中）。 我在 Laravel 中這樣做。 我嘗試如下，但是當我在選擇下拉值后刷新頁面時，下拉列表將被重置

<template>
<div class="mt-2">
           
            <select class="form-control" v-model="filter.size">
                <option value="">............</option>
                <option value="big">Big</option>
                <option value="small">Small</option>
            </select>
        </div>
<template>
<script>
    
export default {
    data() {
        return {
            
            filter: {
                size: this.$route.query.size,
     
            },
        };
    },

    mounted() {
  
    },

    watch: {
        filter: {
            handler() {
                this.$router.push({
                    query: this.filter,
                });
            },
            deep: true,
        },
    },
};
</script>

路線

routes: [

    {
        path: '/home',
        component: App,
        name: App,
    
    },
],

查看：在此注冊

   <div class="card-body">
         <search> </search>
   </div>

Answer 1

您必須在已mounted的掛鈎上設置變量值

mounted() {
  this.filter.size = this.$route.query.size
},