VueJs - 基于 v-model 的 Checbokex 和 Textfield 和基于所选选项的值

Question

您好，我正在尝试在选择其中一个选项时设置一个值。文本输入只会在选择选项时显示，并且数组 user.roles 中的值应该填充到输入文本中，但由于某种原因，我无法弄清楚为什么不起作用。任何帮助将不胜感激。

new Vue({
  el: '#app',
  data: {
    user: {
      email: 'test@test.com',
      roles: [{id: 1, name:'Client', value:'this is just a value'}]
    },
    roles: [
      {
        id: 1,
        name: 'Client',
        value:'',
      },
      {
        id: 2,
        name: 'Admin',
        value:'',
      },
      {
        id: 3,
        name: 'Guest',
        value:'',
      }
    ]
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
<template>

     <label>Email</label>
            <input type="text" v-model="user.email" />
        </div>
        <div v-for="(role,index) in roles" :key="role.id">
            <label>{{role.name}}</label>
            <input type="checkbox" v-model="user.roles" :value="role"/>

            <p v-if="user.roles.filter(e => e.id === role.id).length > 0">
              <input type="text" value="The value from user.roles should go here.... instead of the value of role.value">
            </p>
        </div>

        <p>User's selected roels</p>
        {{user.roles}}
        </template>
</div>

Answer 1

我有一个用于测试的 Vue 2 CLI“沙盒”应用程序，因此我根据您的模板和问题中的 Vue 实例创建了一个文件组件。 不确定这是否能解决您的问题，但我确实发现最初检查用户已有的角色复选框时存在问题。

在您的示例中，您的用户已经被分配了角色 1，但相关的复选框最初并未在我的测试应用程序中呈现为选中状态。我查看了将多个复选框绑定到数组的文档，就像在您的代码中一样，但文档没有解决初始化绑定到数组的复选框的问题。

在徒劳地搜索之后，我注意到在您最初的“user.roles”数组中，“客户”角色对象与数据“角色”中的“客户”角色对象不完全匹配，因为属性“role.value” ' 不符合。当我修改您的代码以将预分配的 'user.roles' 'Client' 对象 'value' 属性设置为空字符串时，'Client' 的复选框现在正确地最初呈现为选中状态。

data() {
  return {
    user: {
      email: 'test@test.com',
      roles: [{ id: 1, name: 'Client', value: '' }]
    },
    roles: [
      {
        id: 1,
        name: 'Client',
        value: '',
      },
      {
        id: 2,
        name: 'Admin',
        value: '',
      },
      {
        id: 3,
        name: 'Guest',
        value: '',
      }
    ]
  }
},

Answer 2

new Vue({
  el: '#app',
  data: {
    rolename: [],
    user: {
      email: 'test@test.com',
      roles: [{id: 1, name:'Client', value:'this is just a value'}]
    },
    roles: [
      {
        id: 1,
        name: 'Client',
        value:'',
      },
      {
        id: 2,
        name: 'Admin',
        value:'',
      },
      {
        id: 3,
        name: 'Guest',
        value:'',
      }
    ]
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
<template>

<div>
  <label>Email</label>
  <input type="text" v-model="user.email" />
</div>

<div v-for="role in roles" :key="role.id">
  <label>{{ role.name }}</label>
  <input type="checkbox" v-model="rolename" :value="role.name" />
</div>

<p>
  <input type="input" v-model="rolename" />
</p>

<p>User's selected roels</p>
{{ user.roles }}
        </template>
</div>