Vuejs中的对象元素调用函数答案

【问题标题】：Object element call function in VuejsVuejs中的对象元素调用函数
【发布时间】：2016-11-08 01:10:17
【问题描述】：

我想使用一个函数来设置表格单元格的单个内容。在这个例子中，我想用<strong> 包装状态 - 标签（我不编辑模板，因为在我的应用程序中它存储在一个组件中，该组件被多次使用......）

tableData: [
  {
    "name": "test1",
    "status": "1"
  },
  {
    "name": "test2",
    "status": "0"
  },
  {
    "name": "test3",
    "status": "1"
  }
],
columns: {
  name: {
    title: "name"
  },
  status: {
    title: "status",
    content: function(entry) {
      return "<strong>" + entry.status + "</strong>";
    }
  }
}

我在v-for 循环中尝试了value.content.call() 之类的东西，但这不起作用。

JsFiddle： https://jsfiddle.net/7anuorbu/4/

【问题讨论】：

我认为您的方法不好。您将方法保留在数据对象中。
@Belmin 还有其他好方法吗？
你做的方式让我有点困惑。为什么你没有对数组进行基本迭代，然后将你的状态值包装在模板中的强标签中？或者，如果您不想直接在模板中放置强标签，请使用计算属性或方法为您完成。
@Belmin 我不想更改模板，如何在不编辑模板的情况下使用计算属性？

标签： javascript function object callback vue.js

【解决方案1】：

您可以使用v-html 的帮助，它负责在视图中呈现html。在 HTML 中，你可以这样调用函数：

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

为了完成这项工作，我还修改了columns 数据，因为这两个元素都需要有内容。

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

整个工作代码是here。

【讨论】：

谢谢 - 工作！！我还添加了 v-if 来检查 value.content 是否是一个函数，所以我不必在任何地方添加它:)