ViewUIPlus icon indicating copy to clipboard operation
ViewUIPlus copied to clipboard

[Bug Report]Cascader 组件on-change事件回调里面,v-mode的值,未及时更新

Open dingh123 opened this issue 1 year ago • 1 comments

Environment

windows 10 , Google Chrome 126.0.6478.127, 当前 Vue 版本为 3.2.36,View UI Plus 版本为 1.3.1

Reproduction link

https://run.iviewui.com/preview/Vl0VdZ59

Steps to reproduce

Cascader 组件on-change事件回调里面,v-mode的值,未及时更新

What is expected?

on-change后能直接v-model绑定的值及时更新

What is actually happening?

on-change后能直接v-model绑定的值还是上次的

dingh123 avatar Jul 03 '24 08:07 dingh123

@dingh123 Hello there! I'm here to help you with any bugs, questions, or contributions you might have. Let's work on resolving your issue together.

The issue with the Cascader component's on-change event callback not updating the v-model value in a timely manner is due to the emitValue method being called before the currentValue is updated in the handleSelectItem method. This causes a delay in the update of the v-model value.

To fix this, you should call emitValue after the currentValue has been updated. This can be achieved by using nextTick to ensure the DOM updates are completed before emitting the event:

methods: {
    handleSelectItem (index) {
        const item = this.querySelections[index];
        // other logic
        this.updatingValue = true;
        this.currentValue = newVal;
        nextTick(() => {
            this.emitValue(this.currentValue, oldVal);
        });
    }
}

This ensures that the currentValue is updated before the on-change event is emitted, thus updating the v-model value in a timely manner [1].

To continue talking to Dosu, mention @dosu.

dosubot[bot] avatar Jul 03 '24 08:07 dosubot[bot]