admin管理员组文章数量:1130349
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.
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.
Share Improve this question asked Aug 9, 2019 at 2:13 cdzcdz 1015 bronze badges 2- Render functions are quite good for such use-cases. – kissu Commented Apr 26, 2022 at 0:24
- github./vuejs/jsx-vue2 – Michal Levý Commented Apr 26, 2022 at 11:17
5 Answers
Reset to default 2I found a way to do it without using JSX. Thank you all (:
Do you know the name of using an object like a ponent below?
<template>
<div>
<h1>{{message}}</h1> <!--Work-->
<h1>{{messageJSX}}</h1> <!--Not working-->
<ponent :is="messageComponent"></ponent> <!--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 ponents, not just span</span>`
}
}
}
}
</script>
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>
It can be done; a coworker did it one year ago, here is the diff of the mit
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: '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.
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.
Share
Improve this question
asked Aug 9, 2019 at 2:13
cdzcdz
1015 bronze badges
2
-
Render functions are quite good for such use-cases.
– kissu
Commented
Apr 26, 2022 at 0:24
-
github./vuejs/jsx-vue2
– Michal Levý
Commented
Apr 26, 2022 at 11:17
Add a ment
|
5 Answers
Reset to default
2
I found a way to do it without using JSX. Thank you all (:
Do you know the name of using an object like a ponent below?
<template>
<div>
<h1>{{message}}</h1> <!--Work-->
<h1>{{messageJSX}}</h1> <!--Not working-->
<ponent :is="messageComponent"></ponent> <!--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 ponents, not just span</span>`
}
}
}
}
</script>
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>
It can be done; a coworker did it one year ago, here is the diff of the mit
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: '
本文标签：
javascriptHow to use JSX in datacomputedmethods in VueJS SFCStack Overflow
版权声明：本文标题：javascript - How to use JSX in data, computed, methods in VueJS SFC - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人，
转载请联系作者并注明出处：https://it.en369.cn/questions/1745421981a2150061.html，
本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论