Vue.js，如何在数据数组中使用v-model？

假设我有一个数据数组：

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

应该是什么样子？我试过各种组合。通常，它告诉我像

数据

，

索引

之类的东西，或者任何没有定义的东西，那么如何将数据取出并返回呢

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

接近

在

v-dialog

上的

值

或

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>

导出默认值{
数据（）{
返回{
ARR数据：[
{
id:101，
名字：“爱丽丝”，
姓氏：“史密斯”，
dob:‘1995-12-10’
},
{
id:102，
名字：“雷金纳德”，
姓氏：“Wernst”，
dob:‘1979-10-03’
},
{
身份证号码：103，
名字：“约兰达”，
姓氏：“Finnbogadóttir”，
dob:'
}
],
对话：错，
索引：空
}
},
方法：{
点击卡片（索引）{
this.index=索引
this.dialog=！this.dialog
}
}
}

以及您的模板：

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

接近

在

v-dialog

上的

值

或

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>

导出默认值{
数据（）{
返回{
ARR数据：[
{
id:101，
名字：“爱丽丝”，
姓氏：“史密斯”，
dob:‘1995-12-10’
},
{
id:102，
名字：“雷金纳德”，
姓氏：“Wernst”，
dob:‘1979-10-03’
},
{
身份证号码：103，
名字：“约兰达”，
姓氏：“Finnbogadóttir”，
dob:'
}
],
对话：错，
索引：空
}
},
方法：{
点击卡片（索引）{
this.index=索引
this.dialog=！this.dialog
}
}
}

以及您的模板：

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

接近