javascript - 在vue中为radio和checkbox生成动态id属性
问题描述
我在按钮单击时添加了一个 vue 组件。它添加了带有复选框和单选按钮的新表单元素,其中包含 id 和 for 元素。每次添加新组件时,如何为复选框和单选按钮分配新的 ID。我尝试将数值传递给 id 和属性,但它不起作用
Vue.component('persons-phone', {
props: ['index'],
template: `
<div class="row person_phone_wrapper">
<div class="col-md-4">
<div class="form-group">
<label for="person_phone">Phone Number : <span class="danger">*</span></label>
<input type="tel" class="form-control required" name="person_phone[]">
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<div class="c-inputs-stacked">
<br><br>
<input type="checkbox" id="verified_number_@{{ index }}" name="verified_phone[]">
<label for="verified_number_@{{ index }}" class="block">Verified</label>
</div>
</div>
</div>
<div class="col-md-4">
<div>
<br><br>
<input name="phone_status[]" type="radio" class="with-gap" id="radio_@{{ index }}" />
<label for="radio_@{{ index }}">Active</label>
<input name="phone_status[]" type="radio" class="with-gap" id="radio_@{{ index + 1 }}"/>
<label for="radio_@{{ index + 1 }}">Inactive</label>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label for="remove_person_phone"> </label><br>
<button type="button" class="btn btn-danger btn-sm" @click="$emit('remove')">
<i class="fa fa-close"></i> Remove
</button>
</div>
</div>
</div>
`,
})
var app = new Vue ({
el: '#app',
data: {
personsPhoneCount: [1],
currentPhoneIndex: 1
},
methods: {
deletePersonsPhone: function(index){
this.personsPhoneCount.splice(index,1)
},
addPersonsPhone: function(){
index = this.currentPhoneIndex + 1;
this.currentPhoneIndex = index;
this.personsPhoneCount.push(index);
}
},
computed: {
}
})
<persons-phone v-for="(pPC, index) in personsPhoneCount" @remove="deletePersonsPhone(index)" :num="currentPhoneIndex">
</persons-phone>
解决方案
这样做解决了我的问题
Vue.component('persons-phone', {
props: {
index: {
type: Number,
required: true
},
},
template: `
<div class="row person_phone_wrapper">
<div class="col-md-4">
<div class="form-group">
<label for="person_phone">Phone Number: <span class="danger">*</span></label>
<input type="tel" class="form-control required" name="person_phone[]">
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<div class="c-inputs-stacked">
<br><br>
<input type="checkbox" :id="checkbox" name="verified_phone[]">
<label :for="checkbox" class="block">Verified</label>
</div>
</div>
</div>
<div class="col-md-4">
<div>
<br><br>
<input :name="radio" type="radio" class="with-gap" :id="radio1" />
<label :for="radio1">Active</label>
<input :name="radio" type="radio" class="with-gap" :id="radio2"/>
<label :for="radio2">Inactive</label>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label for="remove_person_phone"> </label><br>
<button type="button" class="btn btn-danger btn-sm" @click="$emit('remove')">
<i class="fa fa-close"></i> Remove
</button>
</div>
</div>
</div>
`,
data: function() {
return {
radio: 'phone_status['+this.index+']',
radio1: 'radio_' + this.index,
radio2: 'radio_' + this.index + '_' + this.index,
checkbox: 'verified_number_'+ this.index,
}
}
})
推荐阅读
- sql - 为什么 ef core 2.1 为包含生成多个选择
- java - 从 Struts Action (Liferay 6.2) 的钩子中更改表单值
- signature - Bro IDS signature_match 触发器
- javascript - 旋转包含的图像后,div 高度未正确设置
- angular - Angular,TypeError:无法读取 null 的属性“任务”
- java - 调用时如何处理其他模块自定义异常
- angular - Ionic 3 Angular 4 App 在产品发布版本上抛出错误
- php - 如何在 Yii2 urlManager 中为默认页面创建干净的 url
- javascript - JQuery 调用在我的 AngularJS 页面中不起作用
- c# - 无法在 C# 中使用集合初始化程序错误初始化十进制类型