How can bind change of object data instantly in Vue.js?

Question

<div
   v-if="!item.editNickname"
   @click="item.editNickname=true, item.tmpNickname=item.nickname"
   >{{item.nickname}}</div>
    <v-text-field
      v-model="item.tmpNickname"
      v-if="item.editNickname||!item.nickname"
      outlined
      dense
      hide-details
      single-line
      v-on:keyup.enter="saveNickname(item)"
    />

Here is my code.
I want to edit nickname in data table.
If user click nickname(div), text field will show up.
But this code cannot bind instantly(Actually value is binded correct, but UI is not react).
Can I make UI react without other action?

=====================================================
+INFO
This code block is in 'v-data-table' which basic component of vuetify. The item is an Object.

try to replace , by ; in @click="item.editNickname=true, item.tmpNickname=item.nickname" — Boussadjra Brahim
In my intention, when I click 'div' the text field will shown. But now, not. The value(item.editNickname) is changed but UI isn't. — Taeho

Sowmyadhar Gourishetty Sowmyadhar Gourishetty · Accepted Answer · 2020-08-18T11:19:25

You can do as below, I'm thinking tmpNickname is not one of the property that you are binding to the data table. See below for the sample code.

You can find the working code here

Template Code:

<div id="app">
  <v-app id="inspire">
    <v-data-table
      :headers="headers"
      :items="desserts"
      class="elevation-1"
    >
      <template v-slot:item.nickname="{ item }">        
        <div v-if="!item.editable" @click="item.editable = true; item['tmpnickname'] = item.nickname">{{ item.nickname }}</div>
        <v-text-field
      v-model="item['tmpnickname']"
      v-if="item.editable"
      outlined
      dense
      hide-details
      single-line
      v-on:keyup.enter="saveNickname(item)"
    />
      </template>
    </v-data-table>
  </v-app>
</div>

Script Code:

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      headers: [
        {
          text: 'Col 1',
          value: 'name',
        },
        { text: 'Nick name', value: 'nickname' }
      ],
      desserts: [
        {
          name: 'Row 1',
          nickname: 'Name 1',
          editable: false
        },
        {
          name: 'Row 2',
          nickname: 'Name 2',
          editable: false
        },
        {
          name: 'Row 3',
          nickname: 'Name 3',
          editable: false
        }
      ],
    }
  },
  methods: {
    saveNickname (item) {
      item.editable = false;
      item.nickname = item.tmpnickname;
    }
  },
})

How can bind change of object data instantly in Vue.js?

1 Answers