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

【问题标题】：how to populate v-text-field with json data如何用 json 数据填充 v-text-field
【发布时间】：2019-08-20 04:22:06
【问题描述】：

我有一个用 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
  }
}

【问题讨论】：

标签： vue.js vuetify.js

【解决方案1】：

问题在于您对表单字段（类型、id、tok、名称）使用了不存在的键。试试这个：

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

[https://jsfiddle.net/2qawL6cg/]

【讨论】：