$eval
已从 Vue 2 中删除。
但是,考虑这个 JSFiddle(Vue 1):https ://jsfiddle.net/kvdmolen/0w193c75
这是带有 Vue 2.0.7 的 JSFiddle:https ://jsfiddle.net/kvdmolen/0w193c75/1/
想象一下,这实际上是一个组件(具有可配置列的表)。
任何想法我应该如何替换$eval
Vue 2?
使用eval()
this 不起作用,因为它超出了v-for
范围
$eval
已从 Vue 2 中删除。
但是,考虑这个 JSFiddle(Vue 1):https ://jsfiddle.net/kvdmolen/0w193c75
这是带有 Vue 2.0.7 的 JSFiddle:https ://jsfiddle.net/kvdmolen/0w193c75/1/
想象一下,这实际上是一个组件(具有可配置列的表)。
任何想法我应该如何替换$eval
Vue 2?
使用eval()
this 不起作用,因为它超出了v-for
范围
您可以通过从 HTML 调用函数来编写代码,而不是使用 eval,并且可以在字段中编写一个函数,该函数将确定输出的内容。
在 HTML 中:
<tr v-for="(item, index) in myitems">
<td v-for="column in mycolumns" v-text="myFunc(index, column.field)">
</td>
</tr>
在 Vue 组件中:
mycolumns: [
{
column: "Todo Name",
field: (item) => item.name
},
{
column: "Status",
field: (item) => item.status
},
{
column: "Status Explanation",
field: (item) => item.status == 1 ? 'Done' : 'Todo'
}
]
},
methods:{
myFunc(index, fn){
return fn(this.myitems[index])
}
}
检查工作小提琴。
但是,这似乎不是一个很好的做法,因为现在您的数据已紧密绑定到您的 html。所以你的容器组件和展示容器不是独立的,不能独立增长,也容易出错。