Open TheoBP opened 3 years ago
has same error : https://github.com/vuejs/composition-api/issues/589
Same here, cannot make vModel
working in TSX environment.
"@vue/babel-helper-vue-jsx-merge-props": "^1.2.1",
"@vue/babel-preset-jsx": "^1.2.4",
"@vue/composition-api": "^1.0.0-rc.1",
"vue": "^2.6.12",
(BTW Vue 3 works fine)
TypeError: tiny-form.tsx: Cannot read property 'body' of undefined at MemberExpression (node_modules\@vue\babel-sugar-composition-api-render-instance\dist\plugin.js:1:1241)
babel.config.js:
module.exports = {
presets: [
[
'@vue/babel-preset-jsx', {
compositionAPI: true
}
],
[
'@babel/preset-env', {
useBuiltIns: 'entry',
modules: 'auto',
loose: false,
corejs: {
version: 3,
proposals: true
}
}
]
]
}
Update:
I think it's something to do with the @vue/composition-api
, check this:
This thing just doesn't work:
import { defineComponent, ref } from '@vue/composition-api'
const TinyForm = defineComponent({
setup () {
const name = ref<string | null>(null)
const age = ref<number | null>(null)
return () => (
<div>
<div>
<label>
<span>Username:</span>
<input vModel={name.value} placeholder='Your name.' />
</label>
</div>
<div>
<label>
<span>Age:</span>
<input vModel_number={age.value} placeholder='Your age.' type='number' />
</label>
</div>
<div>
<button>Submit</button>
</div>
</div>
)
}
})
export {
TinyForm
}
This thing works:
import { defineComponent } from '@vue/composition-api'
const TinyForm = defineComponent({
data: () => ({
name: '',
age: 0
}),
render (h) {
return (
<div>
<div>
<label>
<span>Username:</span>
<input vModel={this.name} placeholder='Your name.' />
</label>
</div>
<div>
<label>
<span>Age:</span>
<input vModel_number={this.age} placeholder='Your age.' type='number' />
</label>
</div>
<div>
<button>Submit</button>
</div>
</div>
)
}
})
Is there any progress?
Getting the same problem? Any ideas?
Same Error...
well since the official Vue 2 JSX support seems to be deprecated, I have made a Vue 2 JSX runtime to support Vue 2 JSX, and it works with TSC/SWC directly, no Babel is needed, and using v-model in setup function no longer throws exceptions.
https://github.com/LancerComet/vue2-jsx-runtime
@galenjiang @hisuwh @leecervan904 give it a shot
any progress?
In my project, @vue/babel-preset-jsx
is using, and vModel
should be config as true
(see https://www.npmjs.com/package/@vue/babel-preset-jsx for details).
[
'@vue/babel-preset-jsx',
{
vModel: true,
functional: true,
injectH: true,
vOn: true,
compositionAPI: true,
},
],
v-model
and vModel
are ok in .tsx
file.
<GroupRadio v-model={this.currentBookId} />
<el-input type="textarea" vModel={this.inputText} />
In my project,
@vue/babel-preset-jsx
is using, andvModel
should be config astrue
(see https://www.npmjs.com/package/@vue/babel-preset-jsx for details).[ '@vue/babel-preset-jsx', { vModel: true, functional: true, injectH: true, vOn: true, compositionAPI: true, }, ],
v-model
andvModel
are ok in.tsx
file.<GroupRadio v-model={this.currentBookId} /> <el-input type="textarea" vModel={this.inputText} />
This exception only appears when returning JSX which contains v-model
from setup()
directly
Using render()
is fine
any progress?
@sodatea any progress?
expect update
any progress?
any progress?
any progress?
vue2 要结束更新了,这个bug能修复一下吗?100%复现的bug...
肯定不好修,不然早修了,直接用value+onInput
I'm getting the following error when using vModel in a JSX/TSX file with the latest version:
Packages:
Component (TSX):
Babel config: