Помогите пожалуйста додумать логику приложения.
При клике на радио-кнопки с цветом, будет меняться цвет блока ВНЕ массива.
Если бы блок (с бордером, для отображения выбранного цвета) был внутри массива, при каждом клике на радио-кнопки, можно было бы менять значение в зависимости от true / false
. Но что делать, если блок живет обособленно от массива?
var app = new Vue({
el: '#app',
data: {
colors: [{
id: 0,
color: 'gray-500',
checked: false
},
{
id: 1,
color: 'red-400',
checked: false
},
{
id: 2,
color: 'orange-200',
checked: false
}
]
}
})
.color {
width: 15px;
height: 15px;
border-radius: 2px;
}
.bigColor {
width: 30px;
height: 30px;
border: 1px solid;
}
.checked {
font-size: 10px;
}
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<div id="app" class="w-full">
<div v-for="color in colors" :key="color.id">
<div class="flex items-center mb-1">
<input type="radio" name="colors" @focus="color.checked=true" @blur="color.checked=false" />
<div :class="`bg-${color.color}`" class="color"></div>
<span class="checked">{{color.checked}}</span>
</div>
</div>
<div class="bigColor"></div>
</div>