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

user_14124410 0
Viewed 202
<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.

web-frontend vuetify.js vue.js
1 Answers

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;
    }
  },
})
user_81440160
Related