如何在Vue.js中立即绑定对象数据的更改？

问题描述

 @Transaction
    @Insert(onConflict = REPLACE)
    fun insertGroupWithUsers(space: GroupEntity,users: List<GroupUserEntity>

这是我的代码。
我想在数据表中编辑昵称。
如果用户单击昵称（div），则会显示文本字段。
但是此代码无法立即绑定（实际上值绑定正确，但UI不会响应）。
我可以不做其他动作就让UI做出反应吗？

================================================ ======
+ INFO
此代码块位于vuetify的基本组件“ v-data-table”中。 该项目是一个对象。

解决方法

您可以执行以下操作，我认为tmpNickname不是要绑定到数据表的属性之一。参见下面的示例代码。

您可以找到工作代码here

模板代码：

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

脚本代码：

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',{
          name: 'Row 3',nickname: 'Name 3',editable: false
        }
      ],}
  },methods: {
    saveNickname (item) {
      item.editable = false;
      item.nickname = item.tmpnickname;
    }
  },})