Привязка радиокнопок в Vue.js

Узнайте, как привязать переключатель к форме в Vue.js.

Если вы не используете какие-либо CSS-фреймворки для Vue.js, вам необходимо создать собственный переключатель.

Давайте создадим очень простой пример - форму с двумя переключателями «да» и «нет».

<input type="radio" id="yes" value="true" v-model="picked">
<label for="yes">Yes</label>
<br>
<input type="radio" id="no" value="false" v-model="picked">
<label for="no">No</label>

Vue.js

new Vue({
  data: {
    picked: null
  }
})

Если вы хотите предварительно выбрать значение, ваше значение v-model picked должно быть равно значению переключателя, чтобы оно было выбрано.

Если вы найдете этот пост полезным, дайте мне знать в комментариях ниже.
Ура,
Ренат Галямов

Хотите поделиться этим с друзьями?
👉 renatello.com/vue-js-radio-button

PS: Обязательно ознакомьтесь с другими руководствами по Vue.js, например Vue.js прокрутка вверх при изменении маршрута, использование jQuery с Vue.js (плюсы и минусы ).

Первоначально опубликовано на https://renatello.com ( Привязка радиокнопок в Vue.js ) 29 июля 2019 г.