0
Помогите пожалуйста додумать логику приложения. 

При клике на радио-кнопки с цветом, будет меняться цвет блока ВНЕ массива. Если бы блок (с бордером, для отображения выбранного цвета) был внутри массива, при каждом клике на радио-кнопки, можно было бы менять значение в зависимости от 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>

1 ответ 1

0

var app = new Vue({
  el: '#app',
  data: {
    activeColor: null,
    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@2.6.0"></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" @change="activeColor = color.color" @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" :class="`bg-${activeColor}`"></div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.