Javascript Vuejs中的对象元素调用函数

我想使用一个函数来设置表格单元格的单个内容。 在本例中，我想用

-标记包装状态 （我不编辑模板，因为在我的应用程序中它存储在一个组件中，该组件被多次使用…）

表格数据：[
{
“名称”：“test1”，
“状态”：“1”
},
{
“名称”：“test2”，
“状态”：“0”
},
{
“名称”：“test3”，
“状态”：“1”
}
],
栏目：{
姓名：{
标题：“姓名”
},
地位：{
标题：“地位”，
内容：功能（条目）{
返回“”+entry.status+””；
}
}
}

我在

v-for

循环中尝试了类似

value.content.call（）

的smth，但这不起作用

jsiddle:

您可以使用的帮助，它负责在视图中呈现html。在HTML中，可以如下方式调用函数：

<tr v-for="entry in tableData">
  <td v-for="(value, key) in columns" v-html="value.content(entry)">
  </td>
</tr>

整个工作代码是。

您可以使用的帮助，它负责在视图中呈现html。在HTML中，可以如下方式调用函数：

<tr v-for="entry in tableData">
  <td v-for="(value, key) in columns" v-html="value.content(entry)">
  </td>
</tr>

---

整个工作代码都是。

我认为你的方法不好。你正在将方法保留到数据对象中。@Belmin还有其他好方法吗？你这样做的方式让我有点困惑。为什么你不对数组进行基本迭代，然后在模板中用强标记包装状态值？或者，如果您不想直接在模板中放置强标记，请使用computed属性或方法为您执行该操作。@Belmin我不想更改模板，如何在不编辑模板的情况下使用computed属性？我认为您的方法不好。您正在将方法保留到数据对象中。@Belmin还有其他好方法吗？您这样做的方式让我有点困惑。为什么不对数组进行基本迭代，然后将状态值包装在模板中的强标记中？或者，如果您不想直接在模板中放置强标记，请使用computed属性或方法为您执行该操作。@Belmin我不想更改模板，如何在不编辑模板的情况下使用computed属性？谢谢-工作！！我还添加了v-if来检查value.content是否是一个函数，所以我不必到处添加：）谢谢-工作！！我还添加了v-if来检查value.content是否是一个函数，所以我不必到处添加：）

   columns: {
      name: {
        title: "name"        ,
        content: function(entry) {
          return "<span>" + entry.name + "</span>";
        }
      },
      status: {
        title: "status",
        content: function(entry) {
          return "<strong>" + entry.status + "</strong>";
        }
      }