Замена $ Eval в VueJS 2

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

Вместо использования Eval, Вы можете написать код, вызвав функцию из HTML, а в поле вы можете написать функцию, который определит, какой будет выход.

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

проверка работает fiddle.

Однако это не очень хорошая практика, так как теперь ваши данные жестко привязаны к вашему html. Таким образом, ваш контейнерный компонент и контейнер представления не являются независимыми, не могут расти независимо и подвержены ошибкам.