如何在Vue.js中即时绑定对象数据的更改？ {{item.昵称}

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

======================================================================
+信息
此代码块位于vuetify的基本组件“v-data-table”中。

---

该项是一个对象。

您可以按以下操作，我认为

tmpNickname

不是绑定到数据表的属性之一。请参见下面的示例代码

您可以找到工作代码

模板代码：

<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)"
    />

---

尝试用

替换
，

在

@click=“item.editNickname=true，item.tmpNickname=item.nickname”

谢谢，我尝试了这种方式，但它的工作原理与以前一样。您所说的UI是什么意思？我的意思是，当我单击“div”时，文本字段将显示出来。但现在不是。值（item.editNickname）已更改，但UI未更改。

tmpNickname

是否已经是数据的现有属性？

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