我想使用一个函数来设置表格单元格的单独内容。
在此示例中,我想用 <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>";
}
}
}
我尝试过类似 value.content.call()
在 v-for
循环,但这不起作用。
JsFiddle: https://jsfiddle.net/7anuorbu/4/
最佳答案
您可以使用 v-html 的帮助,它负责 View 中 html 的渲染。在 HTML 中,您可以像这样调用该函数:
<tr v-for="entry in tableData">
<td v-for="(value, key) in columns" v-html="value.content(entry)">
</td>
</tr>
为了完成这项工作,我还修改了列
数据,因为两个元素都需要有内容。
columns: {
name: {
title: "name" ,
content: function(entry) {
return "<span>" + entry.name + "</span>";
}
},
status: {
title: "status",
content: function(entry) {
return "<strong>" + entry.status + "</strong>";
}
}
整个工作代码是 here .
关于javascript - Vuejs中对象元素调用函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40477370/