我想在Vue.js中把道具（属性）的数据作为标题和单选按钮的值。

Question

假设你想实现什么

我想用Vue.js在单选按钮中加入选项和值，我想通过将数据传递给一个单选按钮的组件来创建一个单选按钮，就像相应的源码一样。

适用的源代码

<template>
  <div>
    <div
      v-for="item in items"
      :key="item"
      :class="{ active: isItemActive(item) }"
      class="item"
      @click="onItemClicked(item)"
    >
      <div class="item-circle">
        <div class="item-circle-dot"></div>
      </div>
      <div class="item-label">
        {{ item.caption }}
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    items: {
      type: Array,
      required: true,
      default: () => []
    },
    value: {
      type: String,
      required: true,
      default: () => ''
    }
  },
  methods: {
    isItemActive(item) {
      return this.value === item
    },
    onItemClicked(item) {
      this.$emit('input', item)
    }
  }
}
</script>

直到现在，我还习惯于传递这样的数组

items: ['hogehoge','hugahuga'],

我想以这样的方式送给你。

items: [
  { caption: 'hogehoge', value: 'hogehogevalue' },
  { caption: 'hugahuga', value: 'hugahugavalue' }
],

请借人