el-tabs下多个el-tab-pane的情况下,各个pane的更新机制?

Lemongo
  • 4
新手上路,请多包涵

有两个标签,其中一个通过接收websocket数据来更新数据:

另一个通过input输入来更新页面中信息
Snipaste_2021-05-25_15-44-30.png
当在第二个标签下的input准备输入时,点击某一个数字,会出现闪动光标,但是如果这时候第一个标签下的websocket数据来了,整个tabs会更新一下,光标还会闪动,但是如果这之前输入了数据但是没有让input失焦而把数据保存起来,数据会丢失,求解决方案!
比如点击后准备编辑input:Snipaste_2021-05-25_15-56-42.png
然后输入一个1:Snipaste_2021-05-25_15-57-40.png
等数据来了就又变回:Snipaste_2021-05-25_15-58-22.png
第一个标签“实时数据”里的数据通过vue的双中括号绑定数据:<span>{{somedata}}<span>,通过vue的method更新数据单向展示到页面;
第二个标签“工具箱”里的input:

<input
                id="UWB_y_1"
                v-bind:value="UWB[0].position.y.toFixed(3)"
                v-on:blur="onInputBlur"
                @keypress.enter="onInputEnter"
                class="Number"
                style="width: 50px; background-color: transparent"
              />

其中失焦和按下回车作用是把输入的数据使用起来,bind的value是页面中的会实时更新的一个数据;

回复
阅读 1.2k
1 个回答
✓ 已被采纳

因为你第二个标签里的input没有使用v-model双向绑定,所以当你改变视图时,并没有同步更改底层的数据,而当数据进来后,试图更新,再根据数据去渲染,这个数据没有更改,导致了这个差异

所以,可以对第二个标签里的input使用v-model进行双向绑定,然后使用watch监听做你的逻辑处理部分,如果业务不允许这样做,可以在el-tab-pane内使用v-if,激活第二个标签时注销第一个标签,激活第一个标签注销第二个标签,这样就不会因为数据的更改造成页面更新了

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏