Javascript Vue组件未正确更新属性

我有一个

聊天

组件，它有一个

多行文本框

和

聊天室

在

消息

出现的地方，多行文本框以一行开头，行数为

44px

高度，如下图所示，当用户键入时，聊天室会变小，而

聊天室也会变小





我在下一个代码中得到了这种行为

//chat room in the chat-room i use css variables to calculate the height
//template
<vue-perfect-scrollbar ref="chatRoomScrollbar" :style="css">
    <div  v-viewer="viewerOptions" class="chat-room px-3 py-3">\
        ...
    </div>
</vue-perfect-scrollbar>
//script
props: {
  textFieldSize: {
    type: Number,
    default: 44,
  },
},
computed: { 
    css() {
      return {
        '--height': `calc(310px - ${this.textFieldSize}px)`,
        '--max-height': `calc(310px - ${this.textFieldSize}px)`,
      };
    },
},
//style
.chat-room-container > .ps-container {
  height: var(--height);
  min-height: var(--max-height);
  background-color: #eceff1 !important;
}

当用户输入时，我得到
文本字段的高度，并将其传递到
聊天室，然后使用css变量得到高度差

问题

当我选择文本并将其删除，或使用
ctrl+z
时，
textFieldSize
的值在我再次键入之前不会重新计算，我尝试在文本字段中使用
input
事件，在
表单中使用一个观察者。text
但它们都不起作用，如何使这项工作

在下面的图像中，我选择了文本，然后将其删除，并显示
textFieldSize
值不变


我想提出两点：

为什么不在
getTextboxSize（）
中使用
$refs
-我认为这不是问题的原因，但肯定可能是。当您可以在
v-text-field
元素上设置一个
ref=“message-field”
，然后使用
this以Vue方式直接访问该元素时，看到您跳入原始js就很奇怪了。$refs['message-field']
。我可能对此不感兴趣，但每当我遇到这种反应性丧失的问题时，通常都是由于这样的原因

这很便宜，通常不是最佳做法，但您可以尝试将
This.$forceUpdate（）
放在
getTextboxSize（）
函数的末尾。这是告诉Vue再次更新布局的一种方法。我会尝试一下，如果它解决了问题，那么你知道这是一种反应性/竞争条件问题。我不会在发布生产代码时附带此。$forceUpdate（）
，因为如果需要使用它，它通常是一个更基本的设计问题的标志

问题在于Ctrl+Z不会触发
输入
事件。我认为最好不要绑定到文本框的
input
事件，而是使用
form.text
属性进行更改

watch:{
    'form.text':function(){
        getTextBoxSize();
    }
}

尝试
@change
而不是
@input
watch:{
    'form.text':function(){
        getTextBoxSize();
    }
}