Question

我有一个用json数据填充的表。每行都有一个“编辑”列。当我单击“编辑”时，将打开一个带有表单的对话框。我想编辑表格中的表格数据。表单的输入字段的值应显示json数据。但是它没有显示。

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

这是我的桌子：

mountPt->next = n;

这是我的json数据

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

这是我的表格：

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

Answer 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/]

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

1 个答案: