我有一个VueJS应用程序，它根据许多复选框项目过滤项目，例如商店的类别过滤器 .
当用户单击复选框时，我们会触发API请求并返回更新的项目列表 . 该URL还使用表示他们选择的复选框的查询字符串进行更新 .
如果用户导航到查询带有字符的URL，我们希望选中与查询字符串中的过滤器相关的复选框 . 这样，如果页面刷新，则检查所有相同的复选框 .
到目前为止，我们已使用 if(window.location.search) 完成此操作，然后解析该查询字符串，将已解析的查询字符串添加到对象中 . 将该对象作为prop传递给子组件，然后设置模型，复选框绑定到查询字符串对象 .
这很有效 . 问题是复选框的口吃和闪烁 . 单击复选框，选择后最初取消选中，API响应返回时，选择 . 用户体验不是很好 . 我假设这是因为我们修改了复选框所绑定的模型，同时还试图在复选框点击时更新它 .
所以我想知道是否有更好的方法来做这件事，如果其他人已经解决了类似的问题 .
我在下面附上了一些代码，但由于它分布在多个组件中，因此很难在此处显示 .
谢谢
<template>
<ul>
<li v-for="(filter, index) in filters" v-bind:key="index">
<input type="checkbox" name="filters" v-model="checked" v-on:change="changeItems">{{filter.filterName}}
</li>
{{checked}}
</ul>
</template>
<script>
export default {
data() {
return {
checked: []
}
},
props: [
'filters',
'checkedFilters' //passed object of filters in query string
],
updated: function() {
this.checked = this.checkedFilters
},
methods: {
changeItems: function (){
this.$emit('change-items', this.checked)
}
}
}
</script>