替换VueJS 2中的$eval

Question

$eval已从Vue 2中移除

但是，考虑这个JSFiddle (Vue 1): https://jsfiddle.net/kvdmolen/0w193c75

这里是JSFiddle与Vue 2.0.7: https://jsfiddle.net/kvdmolen/0w193c75/1/

想象这实际上是一个组件(一个具有可配置列的表)。

任何想法我应该如何取代$eval为Vue 2?

使用eval()这不起作用，因为它是v-for范围之外

Answer 1

您可以通过从HTML调用函数来编写代码，而不是使用eval，并且可以在字段中编写函数，该函数将决定输出内容。

Html:

        <tr v-for="(item, index) in myitems">
            <td v-for="column in mycolumns" v-text="myFunc(index, column.field)"> 
            </td>
        </tr>

:

    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。因此，您的容器组件和表示容器不是独立的，不能独立增长，也容易出错。