选择带有自定义标签的单选按钮

Question

我有一系列的颜色。我想用它们来选择文本的颜色。我使用单选按钮，因为我只想选择一个。我使用标签自定义了默认的无线功能。我遇到的问题是，收音机只选择一个，而我的标签可以选择多个。我怎么才能修复它？这很难理解，所以这是关于我的问题的图片

<div class="d-flex align-items-center flex-wrap mb-7">
        <span class="w--26 flex-fixed pe-3 mb-5">{{
          $t('setting.setting_theme.title_background')
        }}</span>
        <div v-for="color in list_colors" :key="color.id" class="me-5 mb-5">
          <input
            :v-model="color.checked"
            type="radio"
            class=""
            :id="color.id"
            name="selectTitleBackground"
            @click="color.checked = !color.checked"
          />
          <label
            class="w--8 h--8 flex-center cursor-pointer border"
            :for="color.id"
            :style="{ backgroundColor: color.value }"
            ><i
              v-if="color.checked"
              :class="{ 'text-dark': color.value == '#fff' }"
              class="fal fa-check text-light"
            ></i
          ></label>
        </div>
      </div>

enter image description here

Answer 1

在输入上使用的模型是color.checked。此color对象来自v-for="color in list_colors"。因此，检查输入就是更改每个单独的颜色对象。您需要使用数据属性来存储选中的颜色：

data() {
    return {
        selectedColorId: 1
    }
}


<input
   :v-model="selectedColorId"
   type="radio"
   :id="color.id"
   :value="color.id"
   name="selectTitleBackground"
/>

您也不需要输入上的click事件，因为这应该由输入绑定来处理。https://vuejs.org/v2/guide/forms.html#Radio

以及添加勾号图标：

<i v-if="color.id === selectedColorId"
    :class="{ 'text-dark': color.value == '#fff' }"
    class="fal fa-check text-light"
></i>