Vue组件无法正确更新属性

Question

我有一个chat组件，其中有一个multiline textbox和一个messages到的chat room ，多行文本框以一行height 44px的一行开始，当用户键入它的44px增长而chat room变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;
}

当@input事件被触发时，我在父组件中得到textFieldSize

//chat-room
<chat-room
    :text-field-size="textFieldSize">
</chat-room>
// textbox
<v-text-field
    id="messageField"
    v-model="form.text"
    @input="getTextboxSize">
    <v-icon slot="append-icon">send</v-icon>
</v-text-field>
// script
data() {
    return {
        textFieldSize: 44,
    };
},
methods: {
    getTextboxSize() {
      if (document.getElementById('messageField')) {
        const height = document.getElementById('messageField').offsetHeight;
        this.textFieldSize = height;
        this.updateChatScrollbar = true;
      }
      if (this.form.text === '') {
        this.textFieldSize = 44;
      }
    },
},

当用户键入时，我得到了textfield的高度，并将其传递到chat room并使用css变量得到了高度差。

问题

当我选择文本并将其删除时，或者使用ctrl+z ，直到再次输入时，才会重新计算textFieldSize的值，我尝试使用form.text的观察者在text字段中使用input事件，但是他们都没有工作，如何使这项工作？

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

Answer 1

我想提出两点：

1. 为什么不在getTextboxSize()使用$refs getTextboxSize()我不认为这是导致您出现问题的原因，但肯定是可能的。 当您可以在v-text-field元素上设置ref="message-field" ，然后使用Vue方式直接使用this.$refs['message-field'] 。 我可能对此不满意，但是每当我遇到此类问题而失去反应性时，通常是由于诸如此类的问题。

2. 这很便宜，通常不是最佳实践，但是您可以尝试将this.$forceUpdate()放在getTextboxSize()函数的末尾。 这是一种告诉Vue再次更新布局的方法。 我会尝试一下，如果它解决了问题，那么您知道这是一种反应性/竞赛条件问题。 我不使用this.$forceUpdate()生产代码，因为如果您需要使用它，通常表明存在更根本的设计问题。

Answer 2

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

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