{{ render() }} has an error in the console

[eveningwater]

Vue version

3,5,16

Link to minimal reproduction

https://play.vuejs.org/#eNp9Uk1P4zAQ/SuzvqSV2ESr3VM3rQQICTgAAiQuvkTJNA04Y8t2SqUo/52x04QegFzimXlv5s1HL86NSfcdipXIXWkb48Gh7wyoguq1FN4dpNhIalqjrYceLG5hgK3VLSTMS+bQpW7N0Z9mwUiZm/yXVGpyHlpXwzqwF8k1KqXhRVtV/UqWE8AiVWgZs1jCegN5zJdtOEGWAekJICnPRqGsig2PrVGFR7YA8t2fTd/HWsOQZ2xFrwnOkc7JQ8SMgYZM52H/u9UVKu6WiVJw0VDkJLE44zmwym1Tp69OEw+rD3wpShbZKLT3xjfchRQriJEQK7jL99vo87bDs8lf7rB8+8L/Gka94seDRYd2j1LMMV/YGv0Yvnq6wwO/5yCr7xSjfwg+otOqCxpH2EVHFcs+wUW1N3GVDdXP7urgkdzUVBAakEPES8GbD/v5rvVPuX/Tf5EnaeApTmfBA5wPqsJtQzGbJiQ/HVesIQWvXxIeIpaRRafi/5SxiGXj1fJ2jxosm5aOtwSL0Rm+3JmCoFSFc7zwfaFClXgN0+d3CB75IsfgJzML1Bm6ZGnjQIbwFMMHrEESLg==

Steps to reproduce

see the console.

What is expected?

Expected to render this result or give a warning that this rendering method is not supported.

What is actually happening?

Get an error: Converting circular structure to JSON
--> starting at object with constructor 'Object'
| property 'vnode' -> object with constructor 'Object'
--- property 'component' closes the circle in the console

System Info

Browsers

Any additional comments?

No response

[gweesin]

@edison1105 Could I consider print vnode as {} is correct behavior?

[edison1105]

Actually, I don’t think this usage is valid. Could you please provide a real-world example to clarify?

[eveningwater]

Actually, I don’t think this usage is valid. Could you please provide a real-world example to clarify?

When I try to render a list in a data-driven way, such as in the following code:

<div class="item in dataList" :key="item.value">
     <div class="child">{{ isFunction(item?.render) ? item?.render() :  currentData[item.value] }}</div>
</div>

The render function can either render a string or a vnode. In this case, I might mistakenly use a vnode to drive the rendering. For example:

const testList = [
  {
    label: "xxx:",
    value: "",
    render: (item) => {
      return `${item?.xxx} ${item?.xxx}`;
    },
  },
  {
    label: "Price:",
    value: "",
    render: (item) => {
     // For example, I add a special mark element
      return h("span", { class:"mark"}, `¥${formatPrice(item?.cost_price)}`);
    },
  },

  {
    label: "Address:",
    value: "storage_address",
  },
  {
    label: "Creation Time",
    value: "",
    render: (item) => {
      return formatDateTime(item?.create_time);
    },
  },
]

Is this usage reasonable? In fact, I think the render function render a string, which should be valid.I created a pr here.

[edison1105]

I suggestion to add a type to distinguish whether the item is a vnode and use component is for vnode rendering and interpolation for non-vnode rendering.

[eveningwater]

I suggestion to add a type to distinguish whether the item is a vnode and use component is for vnode rendering and interpolation for non-vnode rendering.

I actually did this to get around this problem, so I think the framework should also provide a warning to remind me not to do this.

[edison1105]

Interpolation expressions are not designed to render vnodes. If you need to render HTML, you can try using v-html instead of interpolation expressions.

[eveningwater]

Interpolation expressions are not designed to render vnodes. If you need to render HTML, you can try using v-html instead of interpolation expressions.

v-html cannot render the vnode, get { Object Object }, here i need to render the vnode such as el-tag, el-text and any more, i try to this:

// list child
<div class="child"><list-value-render :row="row" :item="item" /></div>

listValueRender component:

import { isFunction } from "lodash-es";
import { defineComponent } from "vue";

export default defineComponent({
  props: {
    row: { type: Object, required: true },
    item: { type: Object, required: true },
  },
  setup({ row, item }) {
    return () => {
      return (
        <span class="value">
          {isFunction(row?.render) ? row?.render?.(item) : item?.[row?.value]}
        </span>
      );
    };
  },
});