Vue.js，如何对数据数组使用v-model？
Vue.js，如何对数据数组使用v-model？
提问于 2018-12-18 03:28:41
假设我有一个数据数组：
this.data = [
{
id: 101,
firstName: 'Alice',
lastName: 'Smith',
dob: '1995-12-10'
},
{
id: 102,
firstName: 'Reginald',
lastName: 'Wernst',
dob: '1979-10-03'
},
{
id: 103,
firstName: 'Jolanda',
lastName: 'Finnbogadóttir',
dob: ''
}
]我可以把数据放到卡片里，没问题。我可以识别被点击的卡，检索id，并将其追溯到数据，假设是index == 1，所以我想要的数据是data[index]或{ id: 102, firstName: 'Reginald', lastName: 'Wernst', dob: '1979-10-03' }。
但是，我希望能够用数据填充表单以更新它。v-model应该是什么样子的？我尝试了各种组合。大多数情况下，它告诉我像data、index或任何未定义的东西，那么如何获取和返回数据呢？
<v-dialog v-model="data[index]???" persistent>
<v-text-field v-model="id???" readonly></v-text-field>
<v-text-field label="First Name" v-model="firstName???"></v-text-field>
<v-text-field label="Last Name" v-model="lastName???"></v-text-field>
<v-text-field label="Date of Birth" v-model="dob???"></v-text-field>
<v-btn>Close</v-btn>
</v-dialog>回答 1
Stack Overflow用户
回答已采纳
发布于 2018-12-18 03:51:02
v-dialog上的value或v-model控制可见性，而不是它绑定到的特定数据；因此，您需要传递一个属性，该属性的值在单击卡片时翻转：
本质上：
<script>
export default {
data () {
return {
arrData: [
{
id: 101,
firstName: 'Alice',
lastName: 'Smith',
dob: '1995-12-10'
},
{
id: 102,
firstName: 'Reginald',
lastName: 'Wernst',
dob: '1979-10-03'
},
{
id: 103,
firstName: 'Jolanda',
lastName: 'Finnbogadóttir',
dob: ''
}
],
dialog: false,
index: null
}
},
methods: {
clickCard (index) {
this.index = index
this.dialog = !this.dialog
}
}
}
</script>和你的模板：
<template>
<v-dialog v-model="dialog" persistent>
<v-text-field v-model="arrData[index].id" readonly></v-text-field>
<v-text-field label="First Name" v-model="arrData[index].firstName"></v-text-field>
<v-text-field label="Last Name" v-model="arrData[index].lastName"></v-text-field>
<v-text-field label="Date of Birth" v-model="arrData[index].dob"></v-text-field>
<v-btn>Close</v-btn>
</v-dialog>
</template>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53821840
复制相关文章
相似问题