sdgpsaf 2022-02-16 08:30 采纳率: 85.7%
浏览 144
已结题

vue表格内双向绑定问题,失去焦点表格内数据不显示

问题遇到的现象和发生背景

在一个有编辑功能的vue表格内,动态绑定一组属性,在编辑完成后,表格不正常显示数据

问题相关代码,请勿粘贴截图
      <vxe-column field="name" title="Name" :edit-render="{}">
        <template #edit="{ row }">
          <vxe-input v-model="row.name" type="text"></vxe-input>
        </template>
      </vxe-column>

上面这部分是写属性写死的案例,编辑后正常显示

      <vxe-column
        v-for="(item, index) in tableData"
        :key="item.index"
        :filed="item.name"
        :title="item.nickname"
        :edit-render="{}"
      >
        <template #edit="{ row }">
          <vxe-input
            :key="index"
            :placeholder="item.address"
            v-model="row[item.name]"
            :type="item.C_Type"
          ></vxe-input>
        </template>
      </vxe-column>

这个是动态绑定的属性,为什么编辑之后鼠标失去焦点编辑后的数据就消失了

运行结果及报错内容

img

img

上面两个是属性写死的案例

img

img

这两个是动态绑定属性的结果

请帮忙指出问题在哪,应该怎么正常显示

  • 写回答

1条回答 默认 最新

  • 归来巨星 前端领域新星创作者 2022-02-16 09:00
    关注

    v-model 拆成 :value="row[item.name]" @change="change($event,row,item.name)"

    change(event,row,name){
    row[name] = event.target.value
    this.$forceUpdate()
    }

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

问题事件

  • 系统已结题 2月25日
  • 已采纳回答 2月17日
  • 创建了问题 2月16日

悬赏问题

  • ¥30 这是哪个作者做的宝宝起名网站
  • ¥60 版本过低apk如何修改可以兼容新的安卓系统
  • ¥25 由IPR导致的DRIVER_POWER_STATE_FAILURE蓝屏
  • ¥50 有数据,怎么建立模型求影响全要素生产率的因素
  • ¥50 有数据,怎么用matlab求全要素生产率
  • ¥15 TI的insta-spin例程
  • ¥15 完成下列问题完成下列问题
  • ¥15 C#算法问题, 不知道怎么处理这个数据的转换
  • ¥15 YoloV5 第三方库的版本对照问题
  • ¥15 请完成下列相关问题!