Is there a way to access the output of a component, such as ComponentName, outside of the template in Vue.js? For example, in data, methods, or during the mounted lifecycle hook.
For instance, consider a Vue file named components/Test.vue:
<template>
<div>I'm a test</div>
</template>
In another Vue file called pages/ViewTest.vue:
import Test from '~/components/Test.vue'
export default {
components: {Test},
data() {
return {
test: Test
}
},
mounted: function() {
console.log( Test ) // Output is Test Component Object
console.log( this.test ) // Output is Test Component Object
}
}
The object logged in the console seems to contain a lot of information, including a render property. However, trying to access Test.render() results in an error.
So, how can we retrieve the HTML content (e.g.,
<div>I'm a test</div>Any help or guidance would be appreciated.
EDIT
I am using the vue-material-design-icons package for SVG icons generation:
<template>
<MapMarkerRadius/>
</template>
<script>
import MapMarkerRadius from 'vue-material-design-icons/MapMarkerRadius'
export default {
components: {MapMarkerRadius}
}
</script>
However, I encounter an issue when using a component that generates HTML:
<template>
<div :class="'card'">
<div v-if="title" :class="'card-title'">
{{ title }}
</div>
<div :class="'card-content'">
<slot />
</div>
</div>
</template>
<script>
export default {
name: 'card',
props: {
title: {},
}
};
</script>
When using the card component with a different Vue file:
<template>
<card :title="'Title ' + MapMarkerRadius">
Test Content
</card>
</template>
<script>
import card from '~/components/Card'
import MapMarkerRadius from 'vue-material-design-icons/MapMarkerRadius'
export default {
components: {card, MapMarkerRadius}
};
</script>
The issue arises when displaying the card title, which appears as Title [object].