对象元素调用函数

Object element call function in Vuejs

本文关键字：函数 调用 元素 对象      更新时间：2023-09-26

我想使用一个函数来设置表格单元格的单个内容。在这个例子中，我想用<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>";
    }
  }
}

我尝试了smth像value.content.call()在v-for循环，但这不起作用。

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

您可以使用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>";
        }
      }

相关文章：