VueJs Проверяемая группа переключателей
Я использую vueJs и имею группу переключателей. Когда радио проверено, как я могу привязать атрибут границы css к классу :class = "selected"?
Атрибут :checked не работает, поскольку я привязал его к v-модели.
Итак, если радио отмечено, привяжите класс (выбранный) к div.
<div class = "sau-select lg center" :class = "selected">
<label for = "windows">
<input type = "radio" id = "windows" value = "windows" v-model = "selectedOs" :checked = "checked">
<span></span>
<img src = "/img/windows.gif" alt = "Windows">Windows
</label>
</div>
.selected, я обновил вопрос
Ответы 1
:class = "selected", который вы используете, не имеет большого эффекта.
Чтобы условно применить класс к div, вам нужно будет использовать в качестве условия :class, если selectedOs равен атрибуту value каждого <input>, например, :class = "{redborder: selectedOs === 'windows'}". Подробнее в демонстрации ниже:
new Vue({
el: '#app',
data: {
selectedOs: 'windows'
}
}).redborder { border: 1px solid red; }<script src = "https://unpkg.com/vue"></script>
<div id = "app">
<label :class = "{redborder: selectedOs === 'windows'}">
<input type = "radio" value = "windows" v-model = "selectedOs"> Windows
</label>
<label :class = "{redborder: selectedOs === 'linux'}">
<input type = "radio" value = "linux" v-model = "selectedOs"> Linux
</label>
</div>Обратите внимание, что value = "linux" означает, что этот радиоблок назначит строку "linux" переменной v-model (в данном случае selectedOs). value = "linux" эквивалентен, например, :value = "'linux'".
Нужен ли мне: checked = "checked" в обоих входах?
Я не думаю, что это имеет значение, поэтому нет. Чтобы контролировать, отмечены они или нет, значение selectedOs должно соответствовать каждому соответствующему атрибуту value или нет.
Как называется класс?