取消选中复选框（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 Web检查器，但遇到问题。我不知道罪魁祸首是什么。

<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在HTML Checkbox元素上没有input事件