select radio button with custom label - vue.js

Question

I have an array of colors. I want to use them to choose colors for the text. I use the radio button because I only want to select one. I custom the default radio by using a label. The problem I'm having is that the radio only selects one but my label can select multiple. How can I fix it? It's hard to understand so this is a picture about my problem
<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

The model that is used on the inputs is color.checked. This color object is coming from v-for="color in list_colors". So checking the input is changing each individual color object. You need to use a data property to store the checked color:
data() {
return {
selectedColorId: 1
}
}
<input
:v-model="selectedColorId"
type="radio"
:id="color.id"
:value="color.id"
name="selectTitleBackground"
/>
You also dont need the click event on the input as this should be handled by the input binding. https://v2.vuejs.org/v2/guide/forms.html#Radio
And the adding of the tick icon:
<i v-if="color.id === selectedColorId"
:class="{ 'text-dark': color.value == '#fff' }"
class="fal fa-check text-light"
></i>