我有一个带有帐单地址的表格,下面有一个复选框,默认情况下将送货地址设置为与帐单地址相同。当用户取消选中该复选框时,下面将呈现相同的表单,以设置与帐单地址不同的送货地址。
复选框
<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"
/>
州内属性(property)
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>
最佳答案
更改此:
@input="input()"
对此:
@change="input"
Safari 在 HTML Checkbox 元素上没有 input
事件
关于javascript - 未选中复选框时,条件表单将不会呈现,Safari 错误 (12.2)。在 Chrome 和 Firefox 中运行良好,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55905406/