如何使用json数据填充v-text-field

Posted 2021-03-30

我有一个填充了json数据的表。每行都有一栏“编辑”。当我点击编辑时，会打开一个带有表单的对话框。我想编辑表单中的表数据。表单的输入字段的值应显示json数据。但它没有显示出来。

我尝试使用v-model =“editedItem.type”填写表单。

这是我的表：

<v-data-table
        :items="myjson">
        <template v-slot:items="props">
          <td>{{ props.item.ApplicationType }}</td>
          <td>{{ props.item.ApplicationID }}</td>
          <td>
            {{props.item.APIToken}}                  
          </td>
          <td>{{ props.item.ApplicationName }}</td>
          <td >
            <img src="edit.svg" @click="editItem(props.item)"> Edit
          </td>
        </template>
</v-data-table>

这是我的json数据

{ 
  "Applications": [{
    "ApplicationID": "74382DOD",
    "ApplicationName": "OIMInstance2",
    "ApplicationType": "OIM",
    "APIToken": "ZM8R4FRiZWWKbl235u06zbArCdOBPlEKhqHQO8Y9RJ2HgBPC+cZgbIli8fFuNZaey/2tJciJuILIWIn24WTjGA=="
  }, {
    "ApplicationID": "943ODA6G",
    "ApplicationName": "LDAPInstance2",
    "ApplicationType": "LDAP",
    "APIToken": "R9lDEW5dnN6TZg2sefEEzS6LWMNmFh4iLHMu47LmAsusHl0bZuh2rktSlXqSZRdHHEWq7sP4Xsdy6xNtDYE8xw=="
  }]
}

这是我的表格：

<v-text-field v-model="editedItem.type" label="Type"></v-text-                  
<v-text-field v-model="editedItem.id" label="ID"></v-text-field>
<v-text-field v-model="editedItem.tok" label="API Token"></v-text-field>
<v-text-field v-model="editedItem.name" label="Name"></v-text-field>

这是我的脚本：

import json from '../../static/mockdata.json'

data: () => ({
  myjson: [],
  dialog: false,
  editedIndex: -1,
  editedItem: {
    type: '',
    id: '',
    tok: '',
    name: ''
  }
},
created () {
  this.myjson = json.Applications 
},
methods: {
  editItem (item) {
    this.editedIndex = json.Applications.indexOf(item)
    this.editedItem = Object.assign({}, item)
    this.dialog = true
  }
}

答案

问题是您对表单字段（type，id，tok，name）使用不存在的键。试试这个：

<v-text-field v-model="editedItem.ApplicationType" label="Type"></v-text-field>
<v-text-field v-model="editedItem.ApplicationID" label="ID"></v-text-field>
<v-text-field v-model="editedItem.APIToken" label="API Token"></v-text-field>
<v-text-field v-model="editedItem.ApplicationName" label="Name"></v-text-field>

[Qazxswpoi]