How to use JSX/HTML code in Data() Vue 3 components with VITE-CodePudding

I am create a design system using rollup.js, Vue 3.

I have a component which outputs the contents of the array

<template v-for="item, index in testData" :key="index">
  <DsJsx :render="item" />
</template>

testData:

data() {
 return {
  testData: [
    {
      testBlock:
      <div>
        <b>Column name 2</b> // <-- html code
      </div>,
    },
  ],
};

DsJsx.vue

And this code works correctly.

But when I try to use this component in Vite.js I get this error.

What should I do so that I can use html in the data in the Vite project?

CodePudding user response：

That's invalid syntax for Vue render function, are you sure that DsJsx.vue display text from testBlock ?

Below is valid example:

testData

....
// As string
testBlock: "<div> <b>Column name 2</b> </div>"
....

DsJsx.vue

<script>
export default {
  name: "HelloWorld",
  props: {
    element: String,
  },
  render(h) {
    return h("div", {
      domProps: { innerHTML: this.element }
    });
  },
};
</script>

CodePudding user response：

Add to vite.config.js

import vueJsx from '@vitejs/plugin-vue-jsx';
.....
plugins: [
    vueJsx({}),
],

and lang="jsx" to <script>