vuejs/jsx-vue2

Can I define returned jsx in `methods` property in SFC?

wqcstrong opened this issue · 3 comments

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:

image

Help me, plz~

the vite plugin process vue is vite-plugin-vue2@1.5.1

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...

@sodatea Sorry to bother you, take a look at my issue plz, THX!