Событие щелчка Chrome / Safari в разное время

Question

У меня есть портал рецептов Vue с фильтром на стороне, где пользователи могут выбрать данный тег.

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

После выбора тега мой код vue проверяет, было ли это событие «проверка или снятие отметки», а затем вызывает мой бэкэнд:

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) показывает true в Chome и false в Safari, что приводит к правильной фильтрации 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>