Here is the code snippet I am working with: import './menu-item'; import ItemImage from "./item-image";
Vue.component('quest-card', {
props: {
title: String,
isFree: Boolean,
points: Number,
item: String,
level: Number,
},
components: {
ItemImage
},
methods: {
showFree: function() {
return !!+this.isFree;
},
},
template: `
<section class="quest-reward bg-dark">
<div class="rewardLevel">{{ level }}</div>
<div v-if="!showFree()" class="bg-success freeReward">FREE</div>
<div class="rewardItem">
<item-image name="item" heb-name="test" rarity="epic"></item-image>
</div>
</section>
`,
})
This component is being used in a legacy HTML/JQuery website and when rendered using the selector (<quest-card ...>), the item-image component is not displayed:
https://i.sstatic.net/m5sYb.png
The structure of the item image component is as follows:
const ItemImage = Vue.component('ItemImage', {
props: ['name','heb-name', {
rarity: {
default: 'normal',
type: String,
}
}],
computed: {
glowClass: () => {
return `glow-${this.rarity}`;
}
},
template: `
<img v-bind:src="'images/items/' + item + '.png'" v-bind:class="glowClass"/>
`,
})
export default ItemImage;
I suspect there might be an issue with how the Vue component is exported, but I'm unsure how to resolve it so that both components can work together seamlessly. Any suggestions on what I should do?