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

我有一个用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>

这些方法由我的模板调用，如上所示。我尝试在代码中设置断点，这些方法确实会被调用并返回正确的值。然而，dom仍然是空的。

order item图标

img标记没有src，并且

order item amount

span缺少

/

前面的第一部分

---

对于将属性绑定到组件方法，我应该做些什么吗？

当使用

Emit

修饰时，方法的返回Vue为

换句话说，用

修饰的方法会发出

解决方案：删除装饰程序并手动发出事件

等效代码为：

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

在属性中有一个方法不应该是问题。您的函数或数据可能有问题？你有没有试着在别的地方打印结果？比如，如果在循环中放置一个
{{getIcon（item.name）}
，会发生什么？显示原始变量是有效的。在我的模板中有一个
{{item.amount}
，这个出现了。但是斜杠前面调用方法的部分没有。方法上的断点也会被正确的参数触发。除了方法返回的内容根本没有出现在dom中之外，一切似乎都正常运行
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;
}