Can I define returned jsx in `methods` property in SFC?
wqcstrong opened this issue · 3 comments
wqcstrong commented
Env
- "vue": "^2.6.0",
- "vue-template-compiler": "^2.6.12",
- "rollup": "^2.48.0",
- "rollup-plugin-vue": "^5.0.0",
- "@babel/preset-env": "^7.0.0",
- "@vue/babel-helper-vue-jsx-merge-props": "^1.2.1",
- "@vue/babel-preset-jsx": "^1.2.4"
What happened
Following is my code,
// MyButton.vue
<template>
<p>Segment: {{ segment() }}</p>
</template>
<script>
export default {
name: 'MyButton',
methods: {
segment() {
return <b>A segment</b>;
}
}
};
</script>build output as es-module. Last, I got error when using it, the error:
Help me, plz~
wqcstrong commented
the vite plugin process vue is vite-plugin-vue2@1.5.1
wqcstrong commented
That's OK if drop the template block and use render function property:
<script>
export default {
methods: {
segment () {
return <b>A segment</b>
}
},
render () {
return (
<p>Segment: { this.segment() }</p>
)
}
}
</script>But I must support the template jsx...
