0

Добрый день.
Есть такой код:
Ссылка на гитхаб

Ситуация следующая:
Я прохожу курс по Vue.js и стоит задача кастомизировать радио баттоны. На данный момент я поставил себе за цель прикрутить к каждому баттону дополнительный класс "active" - при клике на него.
(и соответственно что бы другой элемент(радио кнопка) менял свое состояние(класс 'active') на противоположенное при необходимости.)

Был создан массив с двумя элементами(для каждой радио кнопки.) В зависимости от состояния элемента в массиве(true или false) - я планировал включать или выключать класс "active" в каждой кнопке.

При загрузке страницы - классы в кнопках были отстроены правильно в дом дереве(исходя из состояния элементов в массиве.)

Изменить элемент массива при клике удалось. Но мне пока что совершенно не ясно почему не изменяется класс в каждом радиобаттоне именно при клике - ведь я же подвязал зависимость класса от состояния элемента массива..?

Не понимаю что упустил из виду. (создается впечатление что св-во :class не динамическое. Но на сколько мне известно - это не так.)

Буду благодарен за любой конструктивный совет..

введите сюда описание изображения введите сюда описание изображения

0

1 ответ 1

1

Дело может быть в том, что сам объект не меняется непосредственно при клике.

Вообще, с массивами не так просто поддерживать состояние реактивности. Теоретически, ситуацию должна исправлять функция $set, но на практике это срабатывает не всегда.

Гораздо лучше отслеживаются изменения в объектах, но тоже не идеально: значение, которое отслеживается, должно существовать изначально, при инициализации.

Дело может быть в другом, но этот вариант очень возможен.

Посмотрел код.

  1. Свойство float меняет местами radio buttons. Я так понимаю, что это лишнее.

  2. Странная логика определения нажатия на radio. Гораздо проще передавать индекс нажатого radio.

  3. А собственно, массив здесь не очень нужен, достаточно хранить только итоговое значение.

Пример готового кода:

new Vue({
  el: "#app",
      data(){
        return{
          form: {
            storeData: 0
          }
        }
      },
      methods:{
        clickStoreData: function(index){
        	this.form.storeData = index-1
        }
      },
})
    fieldset .wrap_radio{
        margin: 5px 0 5px 0;
        height: 30px;
        width: 200px;
        font: 400 15px/30px arial;
        color: #000;
        text-align:left;
        display: block;
    }
    fieldset .wrap_radio .radio{
        border: 3px solid #852005;
        margin: 7px 1px 5px 1px;
        border-radius:12px;
        height: 15px;
        width: 30px;
        background-color: #ff363d;
        /*float: right;*/
        cursor: pointer;
        box-sizing: border-box;
    }
    fieldset .wrap_radio .radio.active{
        border: 3px solid #024406;
        background-color: #019163;
    }
<script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
    <fieldset id="app">
        <div class="wrap_radio">Store Data? Yes/No
            <div 
                 v-for="index in 2"
                 @click="clickStoreData(index)"
                 class="radio"
                 :class="{'active': form.storeData == index-1}"
                 >
            </div>
        </div>
    </fieldset>

Ссылка jsfiddle: https://jsfiddle.net/Nic34/eywraw8t/43540/

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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