Question

到目前为止，此操作可以按预期进行。这意味着在渲染时， Json数据被正确地“转换”为 csv字符串作为属性值。

Json ：

"functions": {
    "function": [
        {
            "name": "foo"
        },
        {
            "name": "bar"
        }
    ]
},

HTML ：

<input allowedfunctions="foo,bar" />

Vue-模板：

<input
    :allowedfunctions="data.functions ?
                    data.functions.function.map(function(e) { return e.name }, data.functions.function).join(',') :
                    ''"
/>

现在，我想重构并使其更具可读性。那么，在渲染过程中如何调用方法？

这样的事情真棒：

<input :allowedfunctions="getAllowedFunctions(data.functions);" />

Answer 1

现在它正在按预期工作。由于评论，在这里我不得不删除分号：

<input :allowedfunctions="getAllowedFunctions(data.functions)" />

此外，该功能必须实现为“方法” 而不是“计算的”：

methods: {
    getAllowedFunctions(functions: any) {
      if (functions) {
        return functions.function.map(function(e: any) { return e.name }, functions.function).join(',');
      }
    }
}

渲染发生时如何在Vue中调用方法

1 个答案: