Vue.js, 如何对数据数组使用v-model？

Question

假设我有一组数据：

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>

Answer 1

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>

Vue.js, 如何对数据数组使用v-model？

Vue.js, how to use v-model with an array of data?

persistence

vue.js