Vue组件无法正确更新属性

Question

我有一个chat组件，其中有一个multiline textbox和一个chat room所在的messages，多行文本框以44px开头height中的chat room，则当用户键入它时，//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; } 会变小，如下图所示。

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

textFieldSize

当触发@input事件时，我在父组件中得到//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的高度，并将其传递给ctrl+z，并使用css变量得到高度差。

问题

当我选择文本并将其删除时，或者我使用textFieldSize时，直到再次输入时，input的值才被重新计算，我尝试在form.text中使用文本字段，使用textFieldSize中的观察者，但没有一个起作用，如何使它起作用？

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

Answer 1

我要提出2分：

1. 您为什么不在$refs中使用getTextboxSize()-我不认为这是造成您问题的原因，但肯定是可能的。奇怪的是，当您可以在ref="message-field"元素上设置v-text-field并随后使用{{1 }}。我可能对此不满意，但是每当我遇到此类问题而失去反应性时，通常是由于诸如此类的事情。

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

Answer 2

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

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