VueJS:v-for内部的动态v-model

Question

尝试根据我设置的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';
const hostName = 'host Name';
const inputs = [
{ id: 1, name: 'Customer Name', vmodel: customerName },
{ id: 2, name: 'Router Hostname', vmodel: hostName }
];
return {
inputs,
customerName,
hostName
};
}
}

文本显示在input字段中，但当尝试键入其他内容时，它不是动态的，它不是绑定的。

<template>
<pre>
<code>
customer name {{ customerName }}
hostname {{ hostName }}
</code>
</pre>
</template>

Answer 1

您可以使用计算属性

export default {
data() {
return {
inputs: [
{ id: 1, name: "Customer Name", vmodel: "customer Name" },
{ id: 2, name: "Router Hostname", vmodel: "host Name" }
]
};
},
computed: {
customerName() {
return this.inputs[0].vmodel;
},
hostName() {
return this.inputs[1].vmodel;
}
}
};