[英]Vue.js How to target object with unknown name in an array on v-model input
我正在使用自動生成的名稱生成對象onclick。 每次的名稱都會不同。 然后,我想使用v模型通過輸入更改對象的值。 如果名稱未知,如何定位對象? 這是我到目前為止的內容:
<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': '',
}
});
}
},
},
});
您可以將名稱另存為反應數據。 例如,將其保存在currentName
<script>
new Vue({
el: "#app",
data: {
//...
currentName: null
},
methods: {
addNew: function (type) {
const name = ""; //...
this.currentName = name;
//...
}
}
});
</script>
對於v模型
<input type="text" v-model="newFields[0][currentName]">
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.