问题描述
我在尝试通过传入vnodes的方式渲染dom,然而jsx渲染的vnodes不符合预期
问题出现的环境背景及自己尝试过哪些方法
开发环境:
vue3
vite2
ant-design-vue
@vitejs/plugin-vue-jsx
我一开始使用h函数的方式直接创建vnodes,满足我的需求;然而,它太繁琐了。换成jsx后,它的v-model表现的不符合预期结果。
相关代码
let inputValue = ref('')
const vnodes = (
<div class={"wrapper"}>
<h1>title</h1>
<Input v-model={[inputValue, "value", ["modifier"]]}></Input>
</div>
)
return {
vnodes
}
你期待的结果是什么?实际看到的错误信息又是什么?
我希望Input的vnode被渲染成这样:
h(A, {
value: inputValue,
"onUpdate:value": ($event) => (inputValue.value = $event),
});
然而,它实际上是这样:
h(A, {
value: inputValue,
"onUpdate:value": ($event) => (inputValue = $event),
});
这样导致了input组件的输入值不更新。
vue的jsx语法又似乎不能直接直接写onUpdate:value事件,怎么办呢?
如果使用jsx来写input 那么可以尝试这样写