v-for 循环内 v-model 的动态绑定
Posted
技术标签:
【中文标题】v-for 循环内 v-model 的动态绑定【英文标题】:Dynamic binding of v-model inside v-for loop 【发布时间】:2020-04-13 16:28:26 【问题描述】:我正在尝试将 v-model 动态绑定到 对象数组 内的 对象属性。我不知道该怎么做。目标是通过 Select html 标记选择用户,然后打印用户权限列表(来自 对象数组)以有可能更改 true/false 使用复选框并将更改保存到对象数组内的对象属性。
模板:
<div id="app">
<select v-model="selectedUser">
<option value="" disabled>Select User</option>
<option v-for="user in users" :value="user.name"> user.name </option>
</select>
<p>User Index: getUserIndex </p>
<ul v-if="getUserIndex !== null">
<li v-for="(perm, id) in users[getUserIndex].perms">
<span> perm.status </span>
<input type="checkbox" v-model="">
</li>
</ul>
</div>
脚本
new Vue(
el: "#app",
data:
users: [
name: 'Alex', perms: [
status: 'active', perm: false ,
status: 'invoice', perm: false
] ,
name: 'John', perms: [
status: 'active', perm: false ,
status: 'invoice', perm: false
] ,
name: 'Helen', perms: [
status: 'active', perm: false ,
status: 'invoice', perm: false
] ,
],
selectedUser: ''
,
computed:
getUserIndex()
let username = this.selectedUser;
let index = this.users.findIndex(el => el.name === username);
if (index == -1)
return null
else return index
,
)
我分享这个 JSFiddle 链接是因为我觉得很难用语言来解释。
https://jsfiddle.net/sgtmadcap/49bjwahs/141/
我需要将 v-model 动态绑定到每个 users[someindex].perms.perm 属性才能更改它。稍后我想将此数组上传到具有所有更改的 firebase 数据库。先感谢您!我知道这是一件基本的事情,但非常感谢任何帮助!附言对不起我的英语不好。
【问题讨论】:
jsfiddle.net/sh0ber/cz9g8b5f 【参考方案1】:这应该可行。
new Vue(
el: "#app",
data:
users: [
name: 'Alex',
perms: [
status: 'active',
perm: false
,
status: 'invoice',
perm: false
]
,
name: 'John',
perms: [
status: 'active',
perm: false
,
status: 'invoice',
perm: false
]
,
name: 'Helen',
perms: [
status: 'active',
perm: false
,
status: 'invoice',
perm: false
]
,
],
selectedUser: ''
,
computed:
getUserIndex()
let username = this.selectedUser;
let index = this.users.findIndex(el => el.name === username);
if (index == -1)
return null
else
return index
,
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<select v-model="selectedUser">
<option value="" disabled>Select User</option>
<option v-for="user in users" :value="user.name"> user.name </option>
</select>
<p>User Index: getUserIndex </p>
<ul v-if="getUserIndex !== null ">
<li v-for="(item, id) in users[getUserIndex].perms">
<span> item.status </span>
<input type="checkbox" v-model="item.perm">
</li>
</ul>
</div>
【讨论】:
【参考方案2】:在你的情况下,<input type="checkbox" v-model="perm.perm">
足以让它工作。
我建议进行一些重构和重命名,sinde perm.perm
显示了您当前的数据结构和命名是多么不直观。
我建议使用computed
属性来返回userPermissions
,而不是通过模板中的索引访问数组。
还可以考虑将您的对象属性重命名为 permissions
和 isAllowed
之类的名称,以便更清楚。
computed:
...
userPermissions()
let index = this.getUserIndex()
// TODO: handle null
return this.users[index].permissions
在你的模板中
<li v-for="p in userPermissions">
<span> p.status </span>
<input type="checkbox" v-model="p.isAllowed">
</li>
【讨论】:
以上是关于v-for 循环内 v-model 的动态绑定的主要内容,如果未能解决你的问题,请参考以下文章
Vue中Select下拉框用v-model绑定了一个值,用v-for遍历出来多个,改变一个下拉框的选项,其他的都会改变
Vue使用v-for时动态绑定ref(v-for组件内使用ref)
vue使用v-for循环,动态修改element-ui的el-switch