The Vue render function is displaying the [object Object] result

Question

The Vue render function is displaying the [object Object] result

I am attempting to show an icon when a certain condition is met, using a theme icon

Script Code

<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 Code

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

However, the output shows:

Passed [object Object]

or 

Failed [object Object]

I experimented with the h() render function and it worked fine, but how can I directly call it as HTML within the template?

javascript vue.js vuejs3

Answer 1

Answer №1

You have the option to include the icon class names directly inside the template by using conditional rendering :

<script setup>
const props = defineProps({
  itemDetail: Object
});

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

Another approach is to utilize the built-in component component along with its prop is bound to the icon based on the condition :

<script setup>
import { h, computed } 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' }, );
const icon = computed(() => {
  return props.itemDetail.status == 'pass' ? passedIcon : failedIcon
})
</script>

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

DEMO

You can also streamline and improve code readability by reorganizing the vnode created by h:

const passedContent = h('span',{},['Passed',h('i', {class: 'bx bxs-check-circle'})]);
...

Answer 2

You have the option to include the icon class names directly inside the template by using conditional rendering :

<script setup>
const props = defineProps({
  itemDetail: Object
});

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

Another approach is to utilize the built-in component component along with its prop is bound to the icon based on the condition :

<script setup>
import { h, computed } 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' }, );
const icon = computed(() => {
  return props.itemDetail.status == 'pass' ? passedIcon : failedIcon
})
</script>

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

DEMO

You can also streamline and improve code readability by reorganizing the vnode created by h:

const passedContent = h('span',{},['Passed',h('i', {class: 'bx bxs-check-circle'})]);
...

Answer 3

Answer №2

Vue Components Playground

Transform your functional components to functions - they are labeled as functional for a reason:

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

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

<template>
 <tr>
  <td>Zip verification</td>
  <td>
  <template v-if="itemDetail.status == 'pass'">Passed <passed-icon /></template>
   <template v-else>Failed <failed-icon /></template>
  </td>
 </tr>
</template>

Answer 4

Vue Components Playground

Transform your functional components to functions - they are labeled as functional for a reason:

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

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

<template>
 <tr>
  <td>Zip verification</td>
  <td>
  <template v-if="itemDetail.status == 'pass'">Passed <passed-icon /></template>
   <template v-else>Failed <failed-icon /></template>
  </td>
 </tr>
</template>

The Vue render function is displaying the [object Object] result

Script Code

Template Code

Answer №1

Answer №2

Similar questions

Animation displayed on page load before running

Using JavaScript and the Firefox browser, learn how to easily highlight an element with Selenium-WebDriver

Having trouble with Semantic UI Modal onShow / onVisible functionality?

Retrieving real-time data in VueJS using vuex framework

What is the correct way to transform an Error object to a string in Node.js?

Creating environment-agnostic builds with the Vue webpack template

Navigate through a collection of Facebook profiles

"Enhance Your Communication: Utilize setTimeout in Ajax

Unraveling encoded characters in URLs using Node.js

The step-by-step guide on displaying API choices in an Autocomplete feature and keeping them up

Error Unhandled in Node.js Application

How can we determine if a Node.js application will remain operational?

Different results are being obtained when destructuring props in a component

I am encountering an issue where the nested loop in Angular TypeScript is failing to return

Experiencing problems with the calling convention in JavaScript

Is it possible to launch a Nextjs app on Vercel for production purposes? How well does it handle high volumes of traffic?

Edit HTML and CSS in live mode while also running JavaScript for instant enhancement

Strategies for transferring class attribute to child component element

Issue in IE with click event not firing from parent page

Gather numerical values and transform them into dates using AngularJS