Replacement for $eval in VueJS 2

Question

$eval has been removed from Vue 2.

But, consider this JSFiddle (Vue 1): https://jsfiddle.net/kvdmolen/0w193c75

Here is JSFiddle with Vue 2.0.7: https://jsfiddle.net/kvdmolen/0w193c75/1/

Imagine this is actually a component (a table with configurable columns).

Any ideas how I should replace $eval for Vue 2?

Using eval() this doesn't work as it is outside of the v-for scope

Do you mean $eval in title as well? And what is the issue in the fiddle, it seems working fine to me. — Saurabh
– Saurabh, Commented Nov 18, 2016 at 10:20
No, sorry, jsfiddle is messing up with the dropdown pre-selector. it was using Vue 1. Try this one: jsfiddle.net/kvdmolen/0w193c75 and then switch in the javascript dropdown Vue version — kvdmolen
– kvdmolen, Commented Nov 18, 2016 at 10:38

Saurabh · Accepted Answer · 2016-11-18 17:06:50Z

1

Instead of using eval, You can write the code by calling a function from HTML, and in the field you can write a function, which will determine what will be the output.

in Html:

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

in Vue Component:

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

check working fiddle.

However this does not seem to be very good practice, as now your data is tightly bind to your html. So your container component and presentation container are not independent, can not grow independently and are error prone as well.

edited Nov 18, 2016 at 17:06

answered Nov 18, 2016 at 10:47

Saurabh

73.8k44 gold badges193 silver badges251 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

kvdmolen Over a year ago

I think JSFiddle is not sweet with external resources. Consider this one: jsfiddle.net/kvdmolen/0w193c75/1 it has the built-in external resource and it does not work with Vue 2 (but works with Vue 1 if you change back to $eval)

Collectives™ on Stack Overflow

Replacement for $eval in VueJS 2

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related