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

Question

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

另一个通过input输入来更新页面中信息

当在第二个标签下的input准备输入时，点击某一个数字，会出现闪动光标，但是如果这时候第一个标签下的websocket数据来了，整个tabs会更新一下，光标还会闪动，但是如果这之前输入了数据但是没有让input失焦而把数据保存起来，数据会丢失，求解决方案！
比如点击后准备编辑input：
然后输入一个1：
等数据来了就又变回：
第一个标签“实时数据”里的数据通过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是页面中的会实时更新的一个数据；

Answer 1

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

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