在Vuejs中动态创建v-model的名称

Question

我有一个按钮，可以在每次单击中创建一个新组件"AddressField"。在这个组件中，我有一个输入，我需要将数据存储在输入中；

这是激活逻辑以创建新组件的按钮

<div class="col-3 p-1">
<button 
type="button" 
class="btn btn-success col-12" 
@click="addAddressField">Calculate
</button>
</div>

每次点击上方的按钮时创建的可重复使用组件

<ul class="p-0 m-0">
<address-field
v-for="(addressfield) in AddressFieldObject"
:key="addressfield.id"
:title="addressfield.title"
v-model="?"
></address-field>
</ul>

添加组件的功能

addAddressField() {
this.AddressFieldObject.push({
id: 'id' + this.nextAddressFieldID++,
title: 'title' + this.nextAddressFieldTitle++
})
this.newAddressField = ''
}

是否可以动态地为v-model创建一个名称？例如：

• 第一次点击/组件，v型名称为"nameModel01">
• 第二次点击/具有v型名称"nameModel02"的组件
• 第三次点击/具有v型名称"nameModel03"的组件

最后，我的目标是将所有输入存储在数组或对象中，就像：

• array＝〔nameModel01，nameModel02，nameModel03〕

Answer 1

您需要使用对象。

我创建了一个示例

注意arr可变

Answer 2

可以这样做。

<ul class="p-0 m-0">
<address-field
v-for="(addressfield, index) in AddressFieldObject"
:key="addressfield.id"
:title="addressfield.title"
v-model="nameModel[index]"
></address-field>
</ul>

或者使用addressfield.id而不是索引。