如何解决如何在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;
}
},})
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。