Vue.js, как использовать v-модель с массивом данных?

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

value или v-model на v-dialog контролирует видимость, а не конкретные данные, к которым он привязан;Поэтому вам нужно передать свойство, значение которого вы переворачиваете, нажимая на свои карты:

По существу:

<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>