I'm working with a TypeScript single file vue component. I've encountered an issue where the template does not display the values returned by certain component methods.
Here's a snippet of the template:
<div class="order-items">
<div class="order-item" v-for="(item, itemIndex) in order.items">
<img class="order-item-icon" :src="getIcon(item.name)" />
<span class="order-item-name">{{ itemsList[item.name].name }}</span>
<span class="order-item-amount">{{ getPlayerAmount(item.name) }}/{{ item.amount }}</span>
</div>
</div>
In the script section, there are a couple of methods being used. I am utilizing vue-property-decorator:
@Emit() getPlayerAmount(itemName: string): string {
if (this.inventory[itemName]) {
return `'${this.inventory[itemName].amount}'`;
} else {
return '0';
}
}
@Emit() getIcon(itemName: string): string {
const icon = Items.getItemData(itemName).icon;
return icon;
}
Although these methods are being called correctly and returning the expected values, the template is not displaying them as intended. The order-item-icon image tag lacks the src attribute, and the order-item-amount span is missing information before the '/' symbol.
Is there a specific step that needs to be taken for binding properties to component methods?