how to populate v-text-field with json data

Question

I have a table populated with json data. There is a column 'edit' in every row. When I click on edit a dialog opens up with a form. I want to edit the table data in the form. The value of input fields of the form should show the json data. But it's not showing.

I tried fill up the form using v-model="editedItem.type".

This is my table:

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

This is my json data

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

This is my form:

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

This is my script:

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

stdob-- stdob-- · Accepted Answer · 2019-03-29T09:39:07

The problem is that you use non-existent keys for the form fields (type, id, tok, name). Try this:

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

how to populate v-text-field with json data

1 Answers