vue中v-model和route.query怎么结合使用？

Question

项目中一般都有列表和搜索条件的业务场景，搜索条件一般都是表单用v-model和一个对象绑定使用。

现在我不想用这个对象，搜索项改变的时候，直接显示到地址栏上，初始话的时候。

const route = useRoute();
const searchData = computed(()=>{
    return {
        name: route.query.name ?? "
    };
})

但是搜索条件上要怎么写，searchData是不能直接和v-model绑定的。

我想的是用value绑定，自己去onchange中做处理。一般大家都怎么处理这个业务场景？

Answer 1

我可能还是会用一个对象去做双向绑定，通过router.push 携带query，然后在onMounted初始化formData

<script setup>
import { reactive, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()

const formData = reactive({})
// 搜索的时候
const onSearch = () => {
  router.push({
      name: routeName,
      query: formData
  })
}

onMounted(() => {
    formData = route.query ?? {}
})

</script>

Answer 2

可以更详细说说吗？
我个人理解意思是搜索项改变，直接跳转到搜索值对应的路由？
我的想法是使用带有 setter 的 computed 。setter 部分额外添加一条 push 到对应路由的代码，getter 则和你所写的 computed 保持一致即可。具体可以参考下官方文档 v-model 组件一节：https://cn.vuejs.org/guide/co...