Vue JS单选输入“已检查”不适用于v模型

问题描述

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

我的代码是：

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

解决方法

因为您定义单选输入的值为admin或user。

因此，您必须让theUser.role='admin'或theUser.role='user'。

对于您的情况，一个解决方案应该是循环theUser.role的缩写users，然后在生命挂钩= {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>