Javascript 为vue中的收音机和复选框生成动态id属性

我正在单击按钮添加一个vue组件。它使用复选框和单选按钮添加新的表单元素，其中包含的id为for元素。如何在每次添加新组件时为复选框和单选按钮分配新Id。 我尝试将数值传递给id和for属性，但没有成功

  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"> &nbsp; </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>
    `,
  })

---

这样做解决了我的问题

  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"> &nbsp; </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,
      }
    }
  })

Vue.component（'persons-phone'{
道具：{
索引：{
类型：数字，
必填项：true
},
},
模板：`
电话号码：*



已证实的



活跃的
不活跃的


去除
`,
数据：函数（）{
返回{
收音机：“电话状态['+this.index+']”，
radio1:'radio_u'+this.index，
radio2:'radio_'+this.index+'u'+this.index，
复选框：“已验证的\u编号\u”+this.index，
}
}
})

我认为我们不能在属性中使用胡须

<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"> &nbsp; </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,
      }
    }
  })