vue.js - 在 VueJS 2 中替换 $eval

Question

$eval已从 Vue 2 中删除。

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

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

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

任何想法我应该如何替换$evalVue 2？

使用eval()this 不起作用，因为它超出了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])
   }
}

检查工作小提琴。

但是，这似乎不是一个很好的做法，因为现在您的数据已紧密绑定到您的 html。所以你的容器组件和展示容器不是独立的，不能独立增长，也容易出错。