Wednesday, 27 April 2022

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></h1> <!--Work-->
        <h1></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.



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

No comments:

Post a Comment