如何在 v-for 上分配 v-model(来自 bootstrap vue 示例)
Posted
技术标签:
【中文标题】如何在 v-for 上分配 v-model(来自 bootstrap vue 示例)【英文标题】:How to assign a v-model on v-for (from bootstrap vue example) 【发布时间】:2020-02-25 04:57:00 【问题描述】:我正在使用 vue-bootstrap 使用 v-for 指令创建一些输入字段。我正在尝试做的基本上与this link 中提供的示例相同,但我不知道如何将我收集的数据获取到 v-model 指令中(我的意思是,从输入中获取数据)。
我可以手动完成并分配每个字段并将其映射到我的对象的 v-model 中,但如果有更好的方法来解决这个问题,那将非常有帮助。
这是几乎完全从示例页面复制的代码 (vue-js),但我的修改失败(使用 cmets):
<template>
<b-container fluid>
<code>result</code>
<b-row class="my-1" v-for="type in types" :key="type">
<b-col sm="3">
<label :for="`type-$type`">Type type :</label>
</b-col>
<b-col sm="9">
<!-- here I modified the v-model part -->
<b-form-input :id="`type-$type`" :type="type" :v-model="`result.$type`"></b-form-input>
</b-col>
<!-- here I added the same "v-model" that I placed into the previous line -->
<p>`result.$type`</p>
</b-row>
</b-container>
</template>
<script>
export default
data()
return
// here I placed the result object and I expected to obtain something like this:
/*
result:
text: "the text",
password: "the password"
...
...
*/
result: ,
types: [
'text',
'password',
'email',
'number',
'url',
'tel',
'date',
`time`,
'range',
'color'
]
</script>
谁能解释我做错了什么?我试图在 v-for 语句中找到 "`type-$type`"
的文档,但我找不到。
【问题讨论】:
【参考方案1】:将result
初始化为:
result:
text: '',
password:, '',
email: '',
number: '',
url: '',
tel: '',
date: '',
time: '',
range: '',
color: ''
在您的模板和v-model
中,使用[]
而不是.
进行密钥访问,即result.$type
=> result[type]
。
还要注意v-model
本身就是一个指令,所以你不需要在这里使用v-bind
(:
):
<b-form-input :id="`type-$type`" :type="type" v-model="result[type]">
</b-form-input>
【讨论】:
它不起作用。我所做的是按照建议初始化结果,然后将原始行更改为:<b-form-input :id="
type-$type" :type="type" :v-model="result[type]"></b-form-input>
但结果对象未在任何输入上更新
这行<p> result.$type </p>
改了吗?
这是我放置的,而不是那行 <p>result[type]</p>
,但它现在没有显示任何内容
对于v-model
,前面不需要冒号。它本身就是一个指令。就做v-model="result[type]"
。以上是关于如何在 v-for 上分配 v-model(来自 bootstrap vue 示例)的主要内容,如果未能解决你的问题,请参考以下文章
如何在 Vue js 的 v-for 循环中使用 v-model
在 vue 项目中,v-for 的时候使用 v-model 快捷绑定变量