Subscribe on changes!

jsx binding event cannot be fired

avatar
Mar 6th 2022

Version

3.2.31

Reproduction link

github.com

Steps to reproduce

First I customized an input component

emits: {
        'update:modelValue': (val?: string) => true,
        'input': (val?: string) => true
    },
    setup(props, context) {
        const inputValue: Ref = ref(props.modelValue);
        watch(inputValue, (val) => {
            context.emit("update:modelValue", val);
        })
        return () => <ElInput class={"low-code-input"} v-model={inputValue.value} />
    },

Then the parent component is jsx, but I am using dynamic components and want to achieve the v-model function

const renderComponent = (data: common.treeItem, component: string) => {
            if (isValidKey(component, data)) {
                let props = data.component_attribute || {};
                const componentName = data[component];
                if (componentName === 'Select' || componentName === 'Radio') {
                    let field = renderComponentListField[componentName];
                    props[field] = JSON.parse(JSON.stringify(data.data));
                    console.log(props);
                }
                if (data._componentAttribute) {
                    props = data._componentAttribute
                }
                props.modelValue = props.value;
                console.log(props);
                props['update:modelValue'] = (value: any) => {
                    console.log(value);
                }
                return h(componentList[componentName], props)
            }

        };

The registered event does not take effect

What is expected?

Hope to get trigger corresponding event

What is actually happening?

Actually update:modelValue does not trigger

avatar
Mar 6th 2022

props['update:modelValue'] event name should be onUpdate:modelValue