Question

我有一个Vue食谱门户网站，该门户网站的侧面有一个过滤器，用户可以在其中选择给定标签。

<filter-button 
    v-on:click="filterByTag()" 
    label="selectedTags.indexOf(<%= tag %>) != -1"
    :isChecked="selectedTags.indexOf(<%= tag %>) != -1"
></filter-button>

选择标签后，我的Vue代码检查它是否是check与uncheck事件，然后调用后端：

filterByTag: function() {
  let check_status = !this.isChecked
  console.log(check_status)
  check_status ? this.$emit('tag_selected', this.tag) :
                 this.$emit('tag_deselected', this.tag)
}

此console.log(check_status)调用在Chome上显示true，在Safari上显示false，从而导致对Chrome的正确过滤和对Safari的不正确适配。

是否有更好的方法来执行此检查，以确保所有浏览器的响应相同？

这是我的filter-button组件：

<script type="text/x-template" id="filter-button">
    <div class="form-check my-3">
      <label class="form-check-label">
        <input class="form-check-input" 
            type="checkbox" 
            v-model="isChecked" 
            v-on:click="filterByTag()"
        >
        {{ tag.name }}
        <span class="form-check-sign">
            <span class="check"></span>
        </span>
        </label>
    </div>
</script>

Answer 1

尝试使用v-on：mouseup。这将确保已触发更改。您也可以使用v-on：change。

<filter-button 
    v-on:change="filterByTag()" 
    label="selectedTags.indexOf(<%= tag %>) != -1"
    :isChecked="selectedTags.indexOf(<%= tag %>) != -1"
></filter-button>

Chrome / Safari在不同时间触发点击事件

1 个答案: