Vue中h()渲染函数返回[object Object]问题求解

你用{{ }}文本插值时，h函数返回的是VNode（虚拟节点）对象，而文本插值会把所有值转成字符串，所以VNode对象被转换成了[object Object]——文本插值只适用于字符串/基本类型值，无法直接渲染VNode。

方法1：用<component>标签渲染VNode #

Vue的<component>组件可以通过:is属性接收VNode对象，直接渲染对应的DOM元素。你可以分开处理文本和图标：

修改后的代码 #

<script setup>
import { h } from 'vue'
const props = defineProps({
  itemDetail: Object
});

const passedIcon = h('i', {class: 'bx bxs-check-circle'});
const failedIcon = h('i', {class: 'bx bxs-cross-circle'});
</script>

<template>
  <tr>
    <td>Zip check</td>
    <td>
      {{ props.itemDetail.status === 'pass' ? 'Passed ' : 'Failed ' }}
      <component :is="props.itemDetail.status === 'pass' ? passedIcon : failedIcon" />
    </td>
  </tr>
</template>

文本用插值表达式输出，图标通过<component>渲染VNode，就能正常显示图标了。

进阶：组合成完整VNode

如果想更紧凑，可以在脚本里直接创建包含文本和图标的完整响应式VNode：

<script setup>
import { h, computed } from 'vue'
const props = defineProps({
  itemDetail: Object
});

const statusContent = computed(() => {
  const text = props.itemDetail.status === 'pass' ? 'Passed ' : 'Failed ';
  const iconClass = props.itemDetail.status === 'pass' ? 'bx bxs-check-circle' : 'bx bxs-cross-circle';
  return h('span', {}, [text, h('i', { class: iconClass })]);
});
</script>

<template>
  <tr>
    <td>Zip check</td>
    <td>
      <component :is="statusContent" />
    </td>
  </tr>
</template>

用computed保证VNode会随itemDetail.status变化自动更新。

方法2：直接用模板条件渲染（更直观的替代方案） #

如果不需要刻意使用h函数，直接在模板里写条件渲染会更易读：

<template>
  <tr>
    <td>Zip check</td>
    <td>
      {{ props.itemDetail.status === 'pass' ? 'Passed' : 'Failed' }}
      <i v-if="props.itemDetail.status === 'pass'" class="bx bxs-check-circle"></i>
      <i v-else class="bx bxs-cross-circle"></i>
    </td>
  </tr>
</template>

内容的提问来源于stack exchange，提问作者Kamran Allana