'How to use JSX in data, computed, methods in VueJS SFC

I'm setting up an app for study. From React, I've known how to use JSX and when I'm writting in VueJS, I don't know how to use it here.

<template>
    <div>
        <h1>{{this.message}}</h1> <!--Work-->
        <h1>{{this.messageJSX}}</h1> <!--Not working-->
    </div>
</template>

<script>
    export default {
        name: "test",
        data() {
            return {
                message: "Hello, JSX!", // Work
                messageJSX: <span>Hello, JSX!</span>, // Not Working
            }
        }
    }
</script>

Now I got this error:

vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in render: "TypeError: Converting circular structure to JSON
    --> starting at object with constructor 'Vue'
    |     property '$options' -> object with constructor 'Object'
    |     property 'router' -> object with constructor 'VueRouter'
    --- property 'app' closes the circle"

Thank you.

Solution 1:^[1]

I found a way to do it without using JSX. Thank you all (:

Do you know the name of using an object like a component below?

<template>
    <div>
        <h1>{{message}}</h1> <!--Work-->
        <h1>{{messageJSX}}</h1> <!--Not working-->
        <component :is="messageComponent"></component> <!--Work-->
    </div>
</template>

<script>
    export default {
        name: "test",
        data() {
            return {
                message: "Hello, JSX!", // Work
                messageJSX: <span>Hello, JSX!</span>, // Not Working
                messageComponent: {
                    template: `<span>Work with all other components, not just span</span>`
                }
            }
        }
    }
</script>

Solution 2:^[2]

messageJSX should be string.

messageJSX: "<span>Hello, JSX!</span>"

In order to output real HTML, you will need to use the v-html directive:

<h1 v-html="messageJSX"></h1>

Solution 3:^[3]

It can be done; a coworker did it one year ago, here is the diff of the commit

         marks[this.dots[this.dots.length-1]] = moment.unix(this.dots[this.dots.length-1]).format("DD/MM/YYYY HH:mm") 
         marks[this.nowDate] = {
-              label: '?',
+              label: <i class="fa fa-arrow-up" aria-hidden="true"></i>,
               style: {
                 backgroundColor: '#ffc107',

and it worked until I rebuild the webpack configuration. My guess is that some babel plugin can be used to claim that the content of a SFC is jsx and not js.

Solution 4:^[4]

You could use this plugin v-runtime-template

<template>
  <div>
    <v-runtime-template :template="template"></v-runtime-template>
  </div>
</template>

<script>
import VRuntimeTemplate from "v-runtime-template";
import AppMessage from "./AppMessage";

export default {
  data: () => ({
    name: "Mellow",
    template: `
      <app-message>{{hello}} {{ name }}!</app-message>
    `
  }),
  components: {
    VRuntimeTemplate,
    AppMessage
  },
  computed: {
    hello () {
      return 'Hello'
    }
  }
};
</script>

Solution 5:^[5]

JSX is only for React, no JSX in vue.js . they are different

maybe this is what you want:

<template>
<div>
    <h1>{{message}}</h1> <!--Work-->
    <h1><span v-if="messageJSX">{{messageJSX}}</span></h1> <!--Not working-->
</div>
</template>

<script>
export default {
    name: "test",
    data() {
        return {
            message: "Hello, JSX!", // Work
            messageJSX: 'Hello, JSX!', // Not Working
        }
    }
}
</script>

No need to use this because the data is already bound with this

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	kissu
Solution 2	kissu
Solution 3	arivero
Solution 4	kissu
Solution 5	Johnson Lee

'How to use JSX in data, computed, methods in VueJS SFC

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]