Question

我有一个VueJS应用程序，它根据许多复选框项目过滤项目，例如商店的类别过滤器。

当用户点击复选框时，我们会触发API请求，并返回更新的项目列表。 URL也会使用表示他们选中的复选框的查询字符串进行更新。

如果用户导航到查询带有字符的URL，我们希望选中与查询字符串中的过滤器相关的复选框。这样，如果页面刷新，则会检查所有相同的复选框。

到目前为止，我们已使用if(window.location.search)完成此操作，然后解析该查询字符串，将已解析的查询字符串添加到对象中。将该对象作为prop传递给子组件，然后设置模型，复选框绑定到更新时的查询字符串对象。

这很有效。问题是复选框的口吃和闪烁。您单击该复选框，它在选择后最初取消选中，API响应返回的时间，它选择。用户体验不是很好。我假设这是因为我们正在修改模型，复选框被绑定，同时还试图在复选框点击时更新它。

所以，我想知道是否有更好的方式来做这件事，如果其他人已经解决了类似的问题。

我已在下面添加了一些代码，但由于它分布在多个组件中，因此很难在此处显示。

由于

＆＃13;

<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>

＆＃13;

以编程方式检查VueJS

0 个答案: