v-for循环中的动态V-model名称
v-for循环中的动态v-model名称是指在Vue.js中使用v-for指令循环渲染表单元素时，动态生成v-model绑定的属性名称。
在Vue.js中，v-model指令用于实现双向数据绑定，将表单元素的值与Vue实例中的数据进行关联。通常情况下，我们可以直接使用固定的属性名称来绑定v-model，例如：
<input v-model="message">然而，在使用v-for指令循环渲染表单元素时，如果需要为每个循环项生成不同的v-model属性名称，就需要使用动态v-model名称。这可以通过使用计算属性或者使用对象语法来实现。
- 使用计算属性：
<div v-for="item in items" :key="item.id">
<input :value="item.value" :name="getInputName(item.id)" @input="updateValue(item.id, $event.target.value)">
</div>data() {
return {
items: [
{ id: 1, value: 'value1' },
{ id: 2, value: 'value2' },
{ id: 3, value: 'value3' }
]
};
},
methods: {
getInputName(id) {
return 'input_' + id;
},
updateValue(id, value) {
// 更新对应id的value值
}
}在上述代码中，通过计算属性getInputName生成了不同的v-model属性名称，然后在input元素中使用:name绑定该属性名称。同时，通过@input监听输入事件，调用updateValue方法更新对应id的value值。
- 使用对象语法：
<div v-for="item in items" :key="item.id">
<input v-model="formData[item.id]">
</div>data() {
return {
items: [
{ id: 1 },
{ id: 2 },
{ id: 3 }
],
formData: {}
};
}在上述代码中，通过使用对象语法，将v-model绑定到formData对象的动态属性上。每个循环项的id作为属性名称，对应的输入值将自动更新到formData对象中。
总结： v-for循环中的动态v-model名称可以通过计算属性或者对象语法来实现。通过动态生成不同的属性名称，可以实现循环渲染表单元素时的双向数据绑定。
相关·内容
假设我有这样的对象
{
[
{id:1, name:'name1'},
{id:2, name:'name2'}
]
}
让我们将这个对象数组的变量称为names。我想使用整个对象本身作为v-model值。
如何在v-for循环中将对象直接用作v-model的值？我试过这样的东西
我试过这样的东西
<div v-for="name in names">
<input v-model="name">
</div>
但是它在一个输入字段中输出了类似这样的[object O
浏览 122提问于2019-08-08得票数 0
下面是我的code.This不工作，因为我想做一个对象的动态键。 <li v-for="index in 6" :key="index">
<div class="input-fld">
<div class="field">
<p class="control has-icons-right">
<input type="text" v-model="f
浏览 24提问于2019-04-02得票数 0
1回答
我想根据v-for循环中的动态计算属性为v-model赋值。请查看此示例。
<template>
<template v-for="field in fields">
<custom-input v-model="field.name"></custom-input>
</template>
</template>
<script>
export default {
data() {
return {
fields: [{&
浏览 15提问于2019-11-28得票数 1
1回答
Vee验证处理动态输入行
、、、
我正在尝试验证一个动态添加的输入字段。每当我只有一行输入要验证时，它就会工作得很好。
工作案例示例：
但是，每当我添加一行时，验证都会验证第一行和添加的行，而不是单独验证每一行。这就是问题所在。
问题案例示例
然而，即使在添加了一个惟一的id字段之后，我也看到了这个问题。
下面是生成输入的代码
<!-- Generate input fields and v-model -->
<tr v-for="(row, rowIndex) in dataFields" :key="row.id">
<
浏览 0提问于2019-07-27得票数 4
回答已采纳
我是Vue.js新手，为了重新安排DOM中独立小部件(组件)的位置，我将它与Vue-Draggable一起使用。
我还希望能够通过包含订单的Ajax响应动态地重新排列此位置。
我当前实现的问题是，当我重新排列时，组件会被重新呈现。我不想这样。
任何想法都会很有帮助。
<template>
<draggable tag="div"
class="container-fluid"
@start="drag=true"
@end="drag=fa
浏览 24提问于2020-05-30得票数 0
回答已采纳
在Vue中，我有一个v-for循环，它根据我拥有的对象来呈现输入。输入是计算函数的v-model：
<template v-for="product in products>"
{{ product.Name }}: <input type="text" v-model="productAmount">
</template>
相应地，具有get和setter的计算函数：
computed: {
productAmount: {
get () {
this.product.Defau
浏览 0提问于2018-10-22得票数 0
1回答
我有一个具有计算属性的数组，可以按名称进行过滤。我希望能够按标签进行过滤，但如果也找到标签，则返回categories.name。例如，如果我在输入中输入午餐，我希望它返回Restaurant，如果整个列表为空，则只用Restaurant填充列表。 <input type="text" v-model="this.search">
<ul>
<li v-for="(category, index) in filter">
{{category}}
</li>
</ul
浏览 34提问于2020-12-12得票数 0
1回答
我知道如何将v-model动态绑定到嵌套数据。例如： <input v-for="(item, i) in items" :key="i" v-model="item.name">
data() {
return {
items: [
{ type: "cat", name:"Smurf" },
{ type: "dog"
浏览 15提问于2020-07-18得票数 0
回答已采纳
我正在动态地生成某个复选框。现在我需要创建动态的v-model。 <div class="form-group input-group">
<label class="form-group-title">DIETARY PREFERENCES</label>
<p>Please mark appropriate boxes if it applies to you and/or your family</p>
<div class="check-group
浏览 16提问于2019-03-06得票数 0
回答已采纳
1回答
我对vuejs非常陌生，我正在制作一个动态表，其中左边的列将有一个隐藏的输入，最终将查询数据库并在弹出窗口中显示结果(为了快速交叉引用能力)。我已经达到了使用v-for正确构建表的程度，但我不太清楚如何将动态v-model绑定到将运行该进程的js函数。如果我的做法完全错误，请让我知道。干杯，谢谢！
...
<tr v-for="tableRow in rtnUnsubs">
<td class="unsubCell">
<input name= "[tableRow.share_id]" v-model=&#
浏览 1提问于2017-06-27得票数 0
vuejs:如果我通过v-model获得复选框的值，但没有设置复选框，则会动态地从数据库中选中。另一方面，如果我可以动态地设置chechbox为选中状态，但不能获得checkbox的值。
使用此选项，我将选中复选框中的值，但不会动态设置为选中
<li v-for="swv in appointment.switch_shift " >
<input type="checkbox" :value="swv.id" v-model="checkshifts"
@change="shift
浏览 2提问于2019-04-28得票数 0
错误：“v-model”指令不能更新迭代变量'msg‘本身vue/valid模型
<div v-for="(msg,name) in normal" :key="name">
<input type="text" v-model="msg">
</div>
<script>
export default{
data(){
normal: {
position: "bottom",
message: "",
浏览 13提问于2020-04-06得票数 2
回答已采纳
尝试基于我设置的v-for数组动态更新包含v-model的输入字段： <div v-for="input in inputs" :key="input.id">
<h6>{{ input.name }}</h6>
<input v-model="input.vmodel" />
</div> export default {
setup() {
const customerName = 'customer Name';
浏览 35提问于2020-04-10得票数 0
回答已采纳
我想知道我如何能够连接laravel函数lang与javascript变量。这里有一个例子：
这个代码不起作用。变量文本在javascript上，an是动态的。php函数lang不翻译串连字，显示reportParameter.txt_date。
不工作显示reportParameter.txt_date
template: `
<div class="text-center mt-1">
<div class="custom-control custom-radio custom-control-inline" v-for="
浏览 1提问于2020-01-28得票数 1
1回答
我正在尝试关注下一个动态插入的输入，我可以关注foobar_x，但不能关注v-for循环中的那些。任何帮助都将不胜感激。
Codepen在这里：
new Vue({
el: '#app',
data: {
test: "xxxxxx",
phones: [
{number: "0000000"},
{number: "1111111"},
],
},
methods: {
focusPhones: function() {
this.$
浏览 0提问于2017-09-26得票数 5
回答已采纳
bootstrap-vue
服务器端/JSON向我发送了单选按钮组的N个类别。用户将被要求将每个类别划分为优先级、高、中、低。我可以为每个类别动态生成单选按钮组，为用户提供优先级评级。
基于N个输入场景，我如何生成/分配/声明/初始化N个单独的v-model数据变量，以存储用户选择，N个类别中的每一个都需要这些变量？
我尝试在数据部分分配一个数组"prioritySelected“
data() {
return {
prioritySelected: [],
};
},
然后created()调用loadFormData()。
浏览 8提问于2021-10-14得票数 1
1回答
我对Vue比较陌生，使用的是VueJS 2的最新版本。
我从数据库中获取了一组数据，如下所示：
{
count: 3,
options: {
'red': 10,
'blue': 20,
'green': 30,
'yellow': 40
}
}
我希望基于count的值(在本例中为3，但可以是任何数字)创建一些选择下拉列表。
在每个选择下拉列表中，我希望显示模型并根据我们必须创建的选择框数量动态地将v- options添加到它们(和Vue的d
浏览 2提问于2020-10-10得票数 0
1回答
如何使用v-model绑定以下嵌套数据
<div v-for="(frame, i) in frames" :key="frame.id" class='well'>
<div v-for="(value, key) in frame" :key="key">
{{ key }}:
<input type="text" :v-model="frame[i].key" :id="key.id">
</di
浏览 107提问于2019-04-16得票数 0
回答已采纳
它应该是动态添加球员，当你点击‘添加’。但它不能让你正确地输入名字。它会更改数组中一半玩家的名称。
<div id="app">
<div v-for="player in players">
<select v-model="player.type">
<option :value="option" v-for="option in playerOptions">{{option.color}}</option&
浏览 1提问于2019-11-13得票数 0
回答已采纳
我有一个从Vue模型中的数组填充的dropdown，如下所示： <!-- First dropdown -->
<select v-model="building">
<option v-for="building in buildings" v-bind:value="building.id">
{{ building.name }}
</option>
</select>
<!-- Entries Input -->
<input v-mode
浏览 17提问于2019-02-02得票数 2
回答已采纳
2回答
我正在尝试在Vue中创建一个动态表。我可以正确地添加行，但当我尝试删除该行时，每次默认情况下，它都会删除最后一行。即使我硬编码了索引号，结果仍然是一样的。
已经两天了，我陷入了这个问题。感谢任何人的帮助。
我的模板：
<div class="box-body">
<table id="myTable" class="table">
<thead>
<tr class="timesheetTableHeader">
浏览 15提问于2018-02-12得票数 0
回答已采纳
2回答
我使用Vue.js 2，我有一个数组，这个数组是从这个API调用(这个调用)获得的，我用这个调用在select中创建了一个select：
"genres": [
{
"id": 28,
"name": "Azione"
},
{
"id": 12,
"name": "Avventura"
},
{
浏览 1提问于2021-05-03得票数 0
回答已采纳
2回答
您好，我正在处理Vue.js模板，我需要使用循环语句显示动态的v-对话框，但现在它显示了所有内容。 Dom： <template v-for="item of faq">
<div :key="item.category">
<h4>{{ item.heading }}</h4>
<div v-for="subitems of item.content" :key="subitems.qus">
<v-dia
浏览 66提问于2019-09-20得票数 1
我正在尝试准备一个动态表单，它基于数据库表中存在的列生成一个表单。每个表单域都基于数据库表中存在的列。 import { mapGetters } from 'vuex'
export default {
name: 'NewRecord',
data () {
return {
columnName: {
}
}
},
computed: {
...mapGetters(['columns'])
},
} 我正在使用mapGetters从state中提取列。列的结构为： [
浏览 36提问于2019-09-02得票数 0
回答已采纳
我有一个组件，我可以添加时，我点击按钮。
<button type="submit" @click="components ++">add select box</button>
<div v-for="component in components">
<select class="selectpicker form-control" v-model="customized_exercise.name" value={{exercise.id}}>
浏览 0提问于2016-06-02得票数 2
2回答
嗨，迭代和编辑对象(非数组)似乎不是最佳实践。但是，是否有最好的方法可以像使用对象数组那样简单地实现它呢？
new Vue({
el: '#app',
data: {
object1: {
'first': 'second'
},
object2: [
{'key': 'first', 'value': 'second' }
]
}})
--
<script src="https://unpkg.com/
浏览 2提问于2018-03-28得票数 1
回答已采纳
我需要一些动态复选框时，给予一定的计数。为此，我使用了两个数组-
(i)Array of index (count)
(ii)Array of values.
对于第一个模型，我使用了一个v模型(因为它需要一些动态输入框)，其次，我使用了键并取出了它的值。
我尝试过使用第二个数组进行一次迭代，但是它没有通过回归测试。
new Vue({
el: '#app',
data: {
count: 3,
call: [1, 2, 3],
sms: [4, 5, 6]
}
})
<script src="https://cdn.jsd
浏览 0提问于2019-08-20得票数 0
回答已采纳
3回答
我将从多个select字段中选择一个选项，并更新所选对象的prozent值：
<div id="assistenzen">
<form>
<select v-model="assistenz" multiple>
<option v-for="option in options" v-bind:value="option">
{{ option.text }}
</option>
</select>
浏览 7提问于2016-12-09得票数 1
回答已采纳
在将来自v-for循环的动态值处理到我的数据库中时遇到了主要问题。在我的Vue应用程序中，我在v-for循环中显示问题，用户可以通过表单回答每个问题。除了用户输入之外，我还希望将他们回答的问题(当前问题对象)的值传递给我的数据库(Google Firebase)。 V-for循环+形式如下所示：： <b-row
v-for="question in questions"
:key="question.content"
>
<form @submit.prevent="postAnswer">
浏览 21提问于2021-02-05得票数 0
1回答
使用Vue 3，当数据值与可用选项值不匹配时，如何动态设置selected选项？
条件：
如果佛罗里达州(FL)是州的存储数据值，并且国家从美国(美国)更改为加拿大(CA)，则该州的选项值变为空白。相反，当没有匹配时，我希望占位符项显示为“Selected”选项。
<template>
<div>
<label v-if="data.country === 'US'">
State
<select v-model="data.state
浏览 2提问于2021-07-08得票数 2
回答已采纳
1回答
动态输入字段数
、、
我在分期付款组件中工作，我需要一个表单输入的动态列表，根据用户选择的分期付款数量(从1到12)。
我不知道如何获得未来表单输入的值。
当我只有一个表单输入时，我使用'v-model'来捕获已经存在的输入字段的值。
但是在一个循环中有一个组件的多个实例时，我无法理解它。
// The User choose 6
// The value 6 (Number) goes to a property inside data() with v-model
data () {
return {
numberOfFields: 6
}
浏览 2提问于2018-04-23得票数 2
回答已采纳
1回答
如何在Vue 3中动态添加模板
、、、、
我正在尝试设置一个Vue 3组件，该组件动态地将行添加到表中。到目前为止，我有以下几点：
<template>
<table>
<tbody>
<tr v-for="(item, index) in tableRows" :key="item.id">
<td>D{{item.id}}</td>
<td><input type="text" v-
浏览 32提问于2022-11-19得票数 0
回答已采纳
我使用一个模态表单来向表的行添加新的详细信息。添加详细信息后，我只是在其末尾添加编辑和删除按钮。现在这里的删除按钮工作正常。如何通过弹出表单模式的复制来编辑表的一行，单击行中的“编辑”按钮。这是我的密码：
<div class="layout-padding">
<div
class="item item-link"
v-for="modal in types"
@click="$refs[modal.ref].open()"
浏览 2提问于2017-08-01得票数 0
回答已采纳
1回答
我有一个带有呈现表的json文件，我有11列，比如id、name等等，我想按每一列进行搜索，但是它的工作是针对一列，当我再次过滤数据时--例如，我有按id排序的数据--之后，它就崩溃了。
我有从json呈现数据的v-for结构。
<div class="document__json" v-for="(item,index) in filteredJson" :key="index" >
<div class="document__data" :title=item.priority>{{item.pri
浏览 0提问于2019-06-21得票数 0
回答已采纳
我们得到了一个组件和指令。我们的组件数据结构如下所示：
{
langs: [
{
title: '',
content: ''
},
{
title: '',
content: ''
}
]
}
在我们的指令中，我们希望从我们的组件中动态更新langs子属性。我们得到的html-form类似于下面的形式，包括我们的指令。
<div v-for="
浏览 18提问于2017-02-27得票数 0
回答已采纳
我想在应该应用这个类的输入字段上绑定一个类。在我的例子中，我有动态创建的输入字段，因为我不能为动态创建的输入字段使用v-model绑定值，所以我不能将类与v-model数据绑定。下面是我在v-for循环中创建的字段：
<template v-for="input in ninjaForm.fields">
<div class="control">
<input
class="input is-large"
:class="{ hasValue: inp
浏览 11提问于2017-12-12得票数 1
1回答
我正在尝试设置一个表单，并在从客户Id中选择一个值时自动填写姓名和id。v-for是一个包含名称、id和公司id的对象数组
.form-field
label(for="customer_name") Customer name
input(type="text" autocomplete="off" v-model="customer_name" readonly)
.form-field
label(for="customer.
浏览 0提问于2019-12-05得票数 0
好的，我有一个表格，这个表格有一个数字显示和一个输入，供用户向上和向下增加数字。
<tr v-for="(obj, index) in OBJECTARRAY" :key="obj.key">
<td>{{OBJOTHERNUMBER- OBJNUMBER}}</td>
<td>
<input v-model="OBJNUMBER" type="number">
</td>
</tr>
我不想
浏览 3提问于2021-06-24得票数 0
1回答
我正在尝试用v-for和一个模板创建多个vuetify textfield，这样我就可以轻松地添加和编辑文本字段，同时保持代码的整洁。 模板标签： <template v-for="obj in textFieldProps">
<v-text-field
:ref="obj.ref"
v-model="obj.model"
:label="obj.lbl"
></v-text-field>
</template> 我当前的数据如下所示： expor
浏览 25提问于2019-04-26得票数 0
您好，我有一个vue组件，如下所示。我使用一个数组来包含动态数量的输入。然后将其作为post请求传递给laravel函数。并基于该数组中的行数创建多个表行。我用来传递值的数组是chargeArrays。
如何处理通过axios from laravel函数发送的数组以创建多个表行？
‘
<div class="form-group row">
<a class="btn btn-primary col-offset-sm-8" @click="addRow">Add row</a>
浏览 1提问于2018-01-23得票数 0
我在Vue中知道，每个反应性数据属性都需要在Vue实例中声明。
在这种情况下，我需要从服务器(比如说票证)中提取数据集，并且在使用v-for时需要有一个与这些数据相关联的模型。
有什么办法可以用票证变量属性(即id )来命名v模型吗？这个是可能的吗？
v-model="{{ ticket.id }}"
如果可能的话，我如何动态地声明vue实例中的反应性数据属性？
就像这样：
<div id="example-1">
<div v-for="ticket in tickets">
<p>
浏览 2提问于2016-12-03得票数 0
回答已采纳
1回答
我已经成功地使用Vue构建了一个表，该表将dropdowns作为每一列的标题。每个dropdown的值都来自不同的axios调用作为数组，它们被正确填充。 我遇到的THe问题是，当我过滤任何列时，它会隐藏整个表，并且没有办法重置它来找回它。所以它根本不能正常过滤，也不会返回到“show all”选项。 这里我做错了什么： <table style="width:100%; text-align:center;">
<thead>
<tr>
<th>
浏览 15提问于2019-09-06得票数 0
回答已采纳
1回答
我有一个v-for循环，它将输出多行输入，我希望将每一行动态保存到一个数组对象中。
V-表示：
<table class="table m-0">
<tbody>
<tr v-for="fund in defaultFunds">
<td>
{{fund.name}}
<b-input v-model="newEntries[fund.id]['id']"
:value="fun
浏览 1提问于2018-05-24得票数 4
回答已采纳
1回答
我需要将v-for的索引设置为动态v-model，但我不知道如何在不触发错误的情况下做到这一点，我已经尝试过这个方法，但并不优雅，并在控制台中给出了错误：
在我的模板部分：
<div v-for="(ob, index) in $v.especifications.$each.$iter" :key="index" class="row">
<div class="form-group" :class="{ 'form-group--error': $v.$error }"
浏览 193提问于2018-12-20得票数 0
在动态表中使用来自对象的未知键绑定v-model 你好! 我正在用一个动态的对象创建一个动态表。(这意味着我不知道哪些键将在这个对象中。 这可以很好地工作。不过，现在我想将对象中的键绑定到一个输入字段中。这不起作用。它将显示键的正确值，但不会将其绑定回数据对象。 <table
v-if="Object.keys(this.userInfo).length > 1"
>
<thead>
<tr>
<th>Type<
浏览 22提问于2021-08-17得票数 0
回答已采纳
我有一个产品数据库，其中有一个名为attributes的列，它将属性/值对存储为JSON。例如，我可以有一个产品，那个产品会有属性，但是每个产品的属性都不一样。因此，一种产品看起来可能是：
#product1
attributes {
color: "green",
size: "small"
}
而另一个看起来可能是：
#product2
attributes {
width: "12inches",
height: "11inches
}
我正在为CRUD产品设置一个表单，包括这些动态属性。到目前为止它看起来是这样的：
浏览 6提问于2021-07-24得票数 1
回答已采纳
当v-for v-model 与对象数组一起使用时，使用带有复选框的可以工作
new Vue({
el: '#example',
data: {
names: [
{ name: 'jack', checked: true },
{ name: 'john', checked: false },
{ name: 'mike', checked: false }
]
}
})
<script src="https://cdnjs.cloudflare.
浏览 0提问于2018-10-07得票数 11
回答已采纳
我从数据库中提取数据，并使用"v-for“循环遍历DOM中的数据。我在循环中有vuetify扩展面板组件。问题是，如果用户单击打开一个扩展面板，它将打开循环中的所有其他扩展面板。我尝试过使用v-model，但是因为面板包含在一个父循环中，所以模型只是分配给面板的每个实例。
这是一个简化的代码笔，显示了我正在处理的基本结构-
<div id="app">
<div v-for="data in testData">
<v-expansion-panels
v-model="panel"
>
浏览 44提问于2020-02-04得票数 1
我正在使用Vue.JS创建动态下拉列表，Countries和Regions正在动态获取，但是Cities JSON被接收到，但没有被提取到视图中，控制台中没有显示错误，我找不到我的错误。
<div id="app">
<form action="">
<div class="form-group">
<label for="country"></label>
<select v-model="country" n
浏览 0提问于2018-08-11得票数 2
1回答
我正在尝试生成一个具有可编辑字段和双向数据绑定的动态b表。
我不希望有任何硬编码的值。现在，我有：
<b-table striped hover :items="filtered">
<template v-slot:cell(issueDescription)="row">
<b-form-input v-model="row.item.issueDescription" />
</template>
<template v-slot:cell(endTi
浏览 18提问于2020-02-13得票数 3
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
