vue。js在使用TypeScript和vue属性装饰器时，如何将属性绑定到方法返回值？

Question

我有一个用TypeScript编写的单文件vue组件。我在模板中使用了一些组件方法来绑定属性，但对于这些值，dom保持为空。

模板（它的一部分，为简单起见而裁剪）如下所示：

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

在脚本部分，有这些方法。我使用的是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;
}

这些方法由我的模板调用，如上所示。我曾尝试在代码中设置断点，这些方法确实会被调用并返回正确的值。然而，dom仍然是空的。order item图标img标记没有src，并且order item amountspan缺少/前面的第一部分。

在将属性绑定到组件方法时，我应该做些什么？

Answer 1

当使用Emit修饰时，该方法的返回Vue用于确定是否应该发出事件。

换句话说，用Emit修饰的方法将始终返回un定义。

解决方案：移除装饰器并手动发出事件。

等效代码为：

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