Question

我有以下带有vue.js绑定的HTML代码。该代码显示表中的项目列表。

<table id="test-vue">
    <tr v-for="(item, index) in items">
        <td>
            <input type="text" v-model="item.foreignId" />
        </td>
        <td>
            <div v-if="canApproveItem(item, foreignValues)">
               // UI allowing to approve the item
            </div>
        </td>
    </tr>
</table>

Vue应用程序定义为：

new Vue({
    el: "#test-vue",
    data: function() {
        return {
            items: [
                {
                    foreignId: '4943',
                }
            ],
            foreignValues: [
                { id: '2424', canApprove: false },
                { id: '4943', canApprove: true }
            ],
    computed: {
        canApproveItem: function(item, foreignValues) {
            let foreign = foreignValues(obj => {
                return obj.id === item.foreignId;
            });
            if (foreign) {
                return foreign;
            } else {
                return false;
            }
        }
    }
})

目标是仅显示链接到其canApprove属性设置为true的“外国”商品的批准UI。用户可以编辑foreignId，并且用户界面应反映出foreignId值的用户更改。

如果执行上述操作，则item函数的canApproveItem参数是Vue对象，而foreignValues是未定义的。控制台中也出现Error in render: "TypeError: canApproveItem is not a function"错误。

如何正确执行？

Answer 1

这听起来像是一种方法。您不应该传入FragmentStatePagerAdapter，因为您可以从方法本身访问它。

foreignValues

和

<table id="test-vue">
    <tr v-for="(item, index) in items">
        <td>
            <input type="text" v-model="item.foreignId" />
        </td>
        <td>
            <div v-if="canApproveItem(item)">
               // UI allowing to approve the item
            </div>
        </td>
    </tr>
</table>

如何在vue.js中创建一个计算函数，该函数使用全局列表和foreach的当前项？

1 个答案: