[英]Vue.js How to target object with unknown name in an array on v-model input
I am generating an object onclick with an automatically-generated name. 我正在使用自动生成的名称生成对象onclick。 The name will be different each time.
每次的名称都会不同。 I then want to change the object's values with an input using v-model.
然后,我想使用v模型通过输入更改对象的值。 How can I target the object if the name is unknown?
如果名称未知,如何定位对象? Here's what I have so far:
这是我到目前为止的内容:
<ul>
<li v-for="type in types" @click="addNew(type)">{{ type }}</li>
</ul>
<form v-if="Object.keys(newFields).length !== 0">
<input type="text" v-model="newFields[0].?????????">
</form>
<script>
new Vue ({
el: '#app',
data: {
types: [
'date',
'number',
'currency',
'text',
],
savedFields: [
],
newFields: [
]
},
methods: {
addNew: function (type) {
const name = `${type}-${Object.keys(this.savedFields).map(key => key === type).length}`;
if (Object.keys(this.newFields).length == 0) {
this.newFields = Object.assign({}, this.newFields, {
[name]: {
'type': type,
'displayLabel': '',
'defaultValue': '',
}
});
}
},
},
});
You can save the name as a reactive data. 您可以将名称另存为反应数据。 For eg, save it in
currentName
例如,将其保存在
currentName
<script>
new Vue({
el: "#app",
data: {
//...
currentName: null
},
methods: {
addNew: function (type) {
const name = ""; //...
this.currentName = name;
//...
}
}
});
</script>
and for the v-model, 对于v模型
<input type="text" v-model="newFields[0][currentName]">
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.