为vue中的单选和复选框生成动态id属性

<template>
  <div>
    <input type="radio" v-bind:id="'radio-' + option.value" v-model="selectedOption" v-for="option in options" :value="option.value">
    <label v-bind:for="'radio-' + option.value">{{ option.label }}</label>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedOption: '',
      options: [
        { value: 'option1', label: 'Option 1' },
        { value: 'option2', label: 'Option 2' },
        { value: 'option3', label: 'Option 3' }
      ]
    };
  }
};
</script>

<template>
  <div>
    <input type="checkbox" v-bind:id="'checkbox-' + option.value" v-model="selectedOptions" v-for="option in options" :value="option.value">
    <label v-bind:for="'checkbox-' + option.value">{{ option.label }}</label>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedOptions: [],
      options: [
        { value: 'option1', label: 'Option 1' },
        { value: 'option2', label: 'Option 2' },
        { value: 'option3', label: 'Option 3' }
      ]
    };
  }
};
</script>