有一个作为单独组件的订单,我在页面上使用了 2 次或更多,它有复选框。如果我点击label
它并且在组件的另一个实例中,它也会被点击,如果我点击输入本身,那么一切都很好。我想制作一个自定义复选框,其中input
隐藏它,您只需单击label
,但它不适用于它。如何解决问题?
<template>
<form action="" @submit.prevent="formSubmit" class="order-form">
<h2>Начать работу</h2>
<div class="order-content">
<div class="order-left">
<div class="order__row">
<label class="down" :for="'order_name_' + makeHash">Имя</label>
<input :id="'order_name_' + makeHash" type="text" :name="'order_name_' + makeHash" v-model="orderName" required="required" maxlength="50">
</div>
<div class="order__row">
<label class="down" :for="'order_tel_' + makeHash">Номер телефона</label>
<input :id="'order_tel_' + makeHash" type="tel" :name="'order_tel_' + makeHash" v-model="orderTel" required="required" maxlength="15">
</div>
<div class="order__row">
<label class="down" :for="'order_email_' + makeHash">Email</label>
<input :id="'order_email_' + makeHash" type="email" :name="'order_email_' + makeHash" v-model="orderEmail" maxlength="40">
</div>
</div>
<div class="order-center">
</div>
<div class="order-right">
<div class="order-right-pick">
Выберите услугу:
</div>
<ul class="">
<li v-for="(feature, index) in features">
<input type="checkbox"
:value="feature"
:id="'cb-feature-'+index"
v-model="selection.features">
<label :for="'cb-feature-'+index">{{feature}}</label>
</li>
</ul>
</div>
</div>
<div class="order__footer">
<div class="border-btn-box pointer-large">
<div class="border-btn-inner">
<button :submit="true" class="border-btn" data-text="Отправить">Отправить</button>
</div>
</div>
</div>
</form>
代码
import DOMPurify from 'dompurify';
import MaskedInput from 'vue-masked-input';
import swal from 'sweetalert';
import axios from 'axios';
export default {
name: 'order',
components: {
MaskedInput
},
data: function(){
return {
orderName: '',
orderEmail: '',
orderTel: '',
errs: [],
token: '',
chatId: '',
features: ["Reactivity", "Encapsulation", "Data Binding"],
selection: {
features: []
},
};
},
methods: {
formSubmit: function(){
let name = this.orderNameCleaned;
let tel = this.orderTelCleaned;
let email = this.orderEmailCleaned;
if(name.length > 0){
this.removeError('name');
} else {
this.addError('name');
}
if(tel.length > 0){
this.removeError('tel');
} else {
this.addError('tel');
}
if(this.checkErrors()){
let msg = '<b>Новая заявка от ' + name + '!</b>\n';
msg += 'Номер телефона: ' + tel + '.\n';
msg += 'Email: ' + email + '.\n';
this.sendMsg(msg);
} else {
let msg = "";
Array.prototype.forEach.call(this.errs, function(err){
if(err == 'name'){
msg += 'Поле имя не должно быть пустое. ';
}
if(err == 'tel'){
msg += 'Поле телефон не должно быть пустое. ';
}
});
this.showErrorAlert(msg);
}
},
sanitize: function(s){
return DOMPurify.sanitize(s).trim().replace(/\s+/g,' ').replace(/_/g, '');
},
checkError: function(err){
return this.errs.indexOf(err);
},
addError: function(err){
if(this.checkError(err) == -1){
this.errs.push(err);
}
},
removeError: function(err){
if(this.checkError(err) != -1){
this.errs.splice(this.checkError(err), 1);
}
},
checkErrors: function(){
if(this.errs.length == 0){
return true;
} else {
return false;
}
},
showErrorAlert: function(msg){
swal("Ошибка", msg, "error");
console.log(msg);
},
showSuccessAlert: function(){
swal("Успешно!", "Ваша заявка принята и будет рассмотрена в ближайшее время.", "success");
this.orderName = '';
this.orderTel = '';
this.orderEmail = '';
},
sendMsg: function(msg){
let url = 'https://api.telegram.org/bot' + this.token + '/sendMessage?chat_id=' + this.chatId + '&text=' + encodeURI(msg) + '&parse_mode=html';
let $this = this;
axios.get(url).then((response) => {
let ok = response.data.ok;
if(ok){
$this.showSuccessAlert();
} else {
$this.showErrorAlert('Случилась какая-то ошибка. Подождите немного и повторите еще раз.');
}
}).catch((error) => {
console.log(error);
$this.showErrorAlert('Случилась какая-то ошибка. Подождите немного и повторите еще раз.');
});
}
},
computed: {
makeHash: function(){
let hash = "";
let possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
for(let i = 0; i < 8; i++)
hash += possible.charAt(Math.floor(Math.random() * possible.length));
return hash;
},
orderNameCleaned: function(){
return this.sanitize(this.orderName);
},
orderTelCleaned: function(){
return this.sanitize(this.orderTel);
},
orderEmailCleaned: function(){
return this.sanitize(this.orderEmail);
},
}
};
我举了一个简单的例子,照着做就没有问题了。