vue.js 使用 TypeScript 和 vue-property-decorator 时如何将属性绑定到方法返回值？答案

【问题标题】：vue.js how to bind a property to a method return value when using TypeScript and vue-property-decorator?vue.js 使用 TypeScript 和 vue-property-decorator 时如何将属性绑定到方法返回值？
【发布时间】：2018-09-14 08:11:20
【问题描述】：

我有一个用 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-icon img 标签没有 src，order-item-amount 跨度缺少 / 之前的第一部分。

为了将属性绑定到组件方法，我应该做些什么特别的事情吗？

【问题讨论】：

在属性中包含方法应该不是问题。也许您的函数或数据有问题？您是否尝试在其他地方打印结果？比如，如果你在循环中放一个 <div>{{ getIcon(item.name) }}</div> 会发生什么？
显示原始变量有效。在我的模板中有一个{{ item.amount}} 并出现了这个。但是调用方法的斜线之前的部分没有。我在方法上的断点也被正确的参数触发。一切似乎都运行良好，除了方法返回的内容根本没有出现在 dom 中

标签： javascript typescript vue.js

【解决方案1】：

当用Emit装饰时，方法的返回Vue为used to determine if the event should be emitted or not。

换句话说，用Emitwill always return undefined装饰的方法。

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

等效代码为：

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

【讨论】：