Vue JS radio input "checked" not working with v-model

Question

I have user data in DB. I want to set default check radio button with user data in database. Without v-model it works fine but if i put v-model on input, "checked" is not working. Anybody has suggestions?

My code is:

<template>
 <div v-for="user in users">
  <input v-model="theUser.role" type="radio" id="admin" value="admin" :checked="user.role === 'admin'">
  <label for="admin">Admin</label><br>
  <input v-model="theUser.role" type="radio" id="user" value="user" :checked="user.role === 'user'">
  <label for="role">User</label>
 </div>
</template>

export default {
  data: () => ({
    theUser: {
      role: '',
      active: '',
    },
  }),
};

let the initial value for theUser.role='admin' or theUser.role='user' — Sphinx
– Sphinx, Commented Sep 11, 2020 at 21:06

Sphinx · Accepted Answer · 2020-09-11 21:26:56Z

2

Because you define the value for radio input is admin or user.

So you have to let theUser.role='admin' or theUser.role='user'.

For your case, one solution should be initials theUser.role by loop users then assign correct default value in life hook=created().

Like below demo:

new Vue ({
  el:'#app',
  data () {
    return {
      users: [
        {role: 'admin', name: 'a'},
        {role: 'user', name: 'b'}
      ],
      theUsers: []
    }
  },
  created () {
    this.theUsers = this.users.map((user) => {
      return {
        role: user.role
      }
    })
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app">
 <div v-for="(user, index) in users" :key="index">
  <input v-model="theUsers[index].role" type="radio" id="admin" value="admin">
  <label for="admin">Admin ({{user.name}})</label><br>
  <input v-model="theUsers[index].role" type="radio" id="user" value="user">
  <label for="role">User ({{user.name}})</label>
 </div>
 <pre>{{theUsers}}</pre>
</div>

edited Sep 11, 2020 at 21:26

answered Sep 11, 2020 at 21:09

Sphinx

10.7k2 gold badges35 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

nehege Over a year ago

oh i see. then no need to use checked if i use v-model. Thanks a lot.

Collectives™ on Stack Overflow

Vue JS radio input "checked" not working with v-model

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related