Vue JS无线电输入“已检查”不适用于v-model

Question

我在数据库中有用户数据。我想在数据库中使用用户数据设置默认检查单选按钮。没有 v-model 它可以正常工作，但是如果我将 v-model 放在输入端，“检查”将不起作用。有人有建议吗？

我的代码是：

<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: '',
    },
  }),
};

Answer 1

因为您将无线电输入的值定义为admin 或user。

所以你必须让theUser.role='admin' 或theUser.role='user'。

对于您的情况，一种解决方案应该是首字母 theUser.role 循环 users 然后在 life hook=created() 中分配正确的默认值。

喜欢下面的演示：

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>