Vue.js VueJS动态数据+；V-模型

在我的数据对象中，我需要将对象推入一个名为

editions

的数组中

data() {
  return {
    editions: []
  }
}

为此，我将基于一些预先确定的字段名动态创建一个表单。这就是问题所在。我不能让v-model合作。我本想做这样的事情：

<div v-for="n in parseInt(total_number_of_editions)">
  <div v-for="field in edition_fields">
    <input :type="field.type" v-model="editions[n][field.name]" />
  </div>
</div>

有人能就如何实现这一目标提出建议吗

但这是行不通的。我得到一个

类型错误：_vm.editions[n]未定义

editions

最初是一个空数组，因此

editions[n]

对于所有

n

来说都是

undefined

。Vue基本上就是这样做的：

const-editions=[]
常数n=1
console.log（版本[n]）/>未定义

奇怪的是，如果我尝试这样做：

v-model=“editions[n]”

。。。它起作用了

当您在

v-model

中使用

editions[n]

时，实际上是在索引

n

处使用新值创建数组项。Vue正在做类似的事情：

const-editions=[]
常数n=2
版本[n]=“foo”
console.log（版本）/=>[未定义，未定义，“foo”]

---

要解决根本问题，请使用一个对象数组初始化

editions

，该数组的长度等于

total\u number\u of \u editions

：

const newObjArray=n=>Array（n）//创建'n'项的空数组
.fill（{}）//填充空洞
.map（x=>（{…x}））//将孔映射到新对象中
this.editions=newObjArray（this.total\u版本数）

如果

总版本数\u

可能会动态更改，请在变量上使用a，并根据新计数更新

版本


constnewobjarray=n=>Array（n）.fill（{}）.map（x=>（{…x}））
新Vue({
el:“#应用程序”，
数据（）{
常量版本\u字段=[
{类型：'number'，名称：'status'}，
{类型：'text'，名称：'name'}，
];
返回{
总版本数：5，
版本：[]，
编辑字段
}
},
观察：{
总版本数：{
处理程序（总版本数）{
const count=parseInt（总版本数）
if（count==this.editions.length）{
//忽略
}else if（计数


版本数
总版本数={{总版本数}
版本={{editions}
{{field.name}{{n-1}}

但这是行不通的。我得到一个
类型错误：_vm.editions[n]未定义

editions
最初是一个空数组，因此
editions[n]
对于所有
n
来说都是
undefined
。Vue基本上就是这样做的：

const-editions=[]
常数n=1
console.log（版本[n]）/>未定义

奇怪的是，如果我尝试这样做：
v-model=“editions[n]”
。。。它起作用了

当您在
v-model
中使用
editions[n]
时，实际上是在索引
n
处使用新值创建数组项。Vue正在做类似的事情：

const-editions=[]
常数n=2
版本[n]=“foo”
console.log（版本）/=>[未定义，未定义，“foo”]


要解决根本问题，请使用一个对象数组初始化
editions
，该数组的长度等于
total\u number\u of \u editions
：

const newObjArray=n=>Array（n）//创建'n'项的空数组
.fill（{}）//填充空洞
.map（x=>（{…x}））//将孔映射到新对象中
this.editions=newObjArray（this.total\u版本数）

如果
总版本数\u
可能会动态更改，请在变量上使用a，并根据新计数更新
版本


constnewobjarray=n=>Array（n）.fill（{}）.map（x=>（{…x}））
新Vue({
el:“#应用程序”，
数据（）{
常量版本\u字段=[
{类型：'number'，名称：'status'}，
{类型：'text'，名称：'name'}，
];
返回{
总版本数：5，
版本：[]，
编辑字段
}
},
观察：{
总版本数：{
处理程序（总版本数）{
const count=parseInt（总版本数）
if（count==this.editions.length）{
//忽略
}else if（计数


版本数
总版本数={{总版本数}
版本={{editions}
{{field.name}{{n-1}}
您可以根据预期的结构初始化数据，所以v-model可以绑定到现有属性。@yuriy636但是如果我有任意数量的数组元素，我该如何做呢？使用edition\u fields变量在数据对象中创建适当的editions属性。您可以根据预期的结构初始化数据，因此v-model可以绑定到现有属性。@yuriy636但是如果我有任意数量的数组元素，我该怎么做呢？使用edition\u fields变量在数据对象中创建正确的editions属性。@Errator无问题：）@Errator无问题：）
editions: [
  {
    name: "sample name",
    status: "good"
  },
  ... 
]