Условная форма не будет отображаться, когда флажок снят, ошибка Safari (12.2).Прекрасно работает в Chrome и Firefox

Question

У меня есть форма с адресом выставления счета и под флажком, который по умолчанию устанавливает адрес доставки такой же, как адрес выставления счета. Когда пользователь снимает флажок, та же форма будет отображена ниже, чтобы установить адрес доставки, отличный от адреса выставления счета.

Флажок

         <div class="col-full">
          <checkbox
            v-model="shippingSameAsBilling"
            :label="$t('billingAddress.shippingSameAsBilling')"
            :disabled="false"
            name="shippingSameAsBilling"
          />
        </div>

условная адресная форма

      <address-form
        v-if="!shippingSameAsBilling"
        :key="submissionAttempts"
        :address.sync="shippingAddress"
        :address-config="shippingAddressConfig"
        :countries="countriesAllowedForShipping"
        name="shippingAddress"
        data-test="shipping-address"
        @updateCountryCode="updateCountryCode"
      />

собственность в состоянии

data() {
  return {
    shippingSameAsBilling: true
  }
 }

В Chrome и Firefox все работает хорошо, однако в Safari 12.2 при снятии флажка форма не будет отображаться. Я пытаюсь использовать веб-инспектор Safari, и я застрял. Я понятия не имею, что может быть виновником.

<template>
  <div
    :data-test="name"
    :class="{ 'checkbox--disabled': disabled }"
    class="checkbox">
    <input
      ref="checkbox"
      :id="name"
      :value="true"
      :name="name"
      :checked="value"
      :disabled="disabled"
      class="checkbox__input"
      type="checkbox"
      @input="input()">
    <label
      :for="name"
      class="checkbox__label"
      tabindex="0"
      @keyup.space="toggle($event)">
      <div>
        <div>{{ label }}</div>
        <div
          v-if="subtext"
          class="checkbox__subtext">
          {{ subtext }}
        </div>
      </div>
    </label>
  </div>
</template>

<script>
export default {
  name: 'Checkbox',
  props: {
    /**
     * Disabled or not
     */
    disabled: {
      type: Boolean,
      default: false
    },
    /**
     * The label in front of the checkbox
     */
    label: {
      type: String,
      required: true
    },
    /**
     * The name of the element, used for testing and automation
     */
    name: {
      type: String,
      required: true
    },
    /**
     * Subtext rendered under the label
     */
    subtext: {
      type: String,
      default: ''
    },
    /**
     * The bound model object
     * @model
     */
    value: {
      type: Boolean,
      required: true
    }
  },
  methods: {
    input () {
      /**
       * Input event on change
       *
       * @event input
       * @type {Boolean}
       */
      this.$emit('input', this.$refs.checkbox.checked)
    },
    toggle () {
      const { checkbox } = this.$refs

      if (!this.disabled) {
        checkbox.checked = !checkbox.checked
      }
    }
  }
}
</script>

Answer 1

Измените это:

@input="input()"

на следующее:

@change="input"

У Safari нет события input в элементе HTML-флажка