javascript - vue.js hur binder man en egenskap till ett metodreturvärde när man använder TypeScript och vue-property-decorator?

Jag har en enskild fil Vue-komponent skriven i TypeScript. Jag använder några komponentmetoder i mallen för att binda egenskaper, men DOM:en förblir tom för dessa värden.

Mallen (en del av den, avklippt för enkelhetens skull) ser ut så här:

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

I skriptdelen finns de metoderna. Jag använder vue-property-decorator, är inte säker på hur stor påverkan det kan ha:

@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;
}

Dessa metoder kallas av min mall, som ses ovan. Jag har försökt sätta brytpunkter i koden och metoderna blir faktiskt kallade och returnerar rätt värde. Ändå förblir DOM:en tom. order-item-icon img-taggen har ingen src, och order-item-amount span saknar den första delen före /.

Finns det något särskilt jag ska göra för att binda egenskaper till komponentmetoder?

Svar #1

När den är dekorerad med Emit används metodens returnerade Vue för att avgöra om händelsen ska emitteras eller inte.

Med andra ord kommer metoder som är dekorerade med Emit alltid att returnera undefined.

Lösning: ta bort dekoratören och skicka händelserna manuellt.

Den motsvarande koden är:

getPlayerAmount(itemName: string): string {
    this.$emit('get-player-amount', itemName);
    if (this.inventory[itemName]) {
        return `'${this.inventory[itemName].amount}'`;
    } else {
        return '0';
    }
}

getIcon(itemName: string): string {
    const icon = Items.getItemData(itemName).icon;
    if (icon) this.$emit('get-icon', itemName);
    return icon;
}