Question

$eval已从Vue 2中删除。

但是，请考虑这个JSFiddle（Vue 1）：https://jsfiddle.net/kvdmolen/0w193c75

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

想象一下，这实际上是一个组件（具有可配置列的表）。

我应该如何为Vue 2替换$eval？

使用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>

在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])
   }
}

检查工作fiddle。

然而，这似乎不是很好的做法，因为现在您的数据与您的html紧密绑定。所以你的容器组件和表示容器不是独立的，不能独立发展，也容易出错。

在VueJS 2中替换$ eval

1 个答案: