如何在 Vue 模板中使用 JavaScript 內置函式？
{{ eval(item.value.substring(2)) }}
我想在 {{}} 中使用 JS 函式 eval()，但它顯??示了許多錯誤，例如：
[Vue warn]: Property or method "eval" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
[Vue warn]: Error in render: "TypeError: _vm.eval is not a function"
vue.esm.js?efeb:1906 TypeError: _vm.eval is not a function
uj5u.com熱心網友回復：
您嘗試eval在模板內部執行，這會導致vue執行eval當前組件的方法。如果您想eval在模板中使用全域函式的結果，只需在組件data物件中創建一個變數并將結果存盤在此處。您也可以創建一個computed帶有eval呼叫的屬性并在模板中使用此屬性。
uj5u.com熱心網友回復：
首先，這eval幾乎在任何情況下（99.9%）都非常糟糕。
其次，如果你真的要使用它，我認為你需要訪問window物件，就像在那里回答如何訪問vue js中的視窗物件？
然后做這樣的事情：
methods: {
eval(expr){ return window.eval(expr) }
}
之后，eval在模板中可見。
uj5u.com熱心網友回復：
嘗試這個。
<template>
...
{{ item }}
...
</template>
<script>
//...
data(){
return {
item: "oldVal"
}
},
methods: {
myFunc(){
this.item = eval(item.value.substring(2)) //<-- here
}
}
//...
</script>
uj5u.com熱心網友回復：
在模板中，Vue 將使用“this”作為前綴。因此這是不可能的。
最簡單的解決方案是將其移動到 Vue 組件的方法部分。
編輯：受@Mikhail Semikolenov 答案啟發的一個非常漂亮的解決方法是為 window 物件創建一個計算屬性。然后，您可以使用以下命令呼叫 eval（以及任何其他視窗函式）：
{window.eval(...)}
uj5u.com熱心網友回復：
實際上，您實際上并不需要eval()
在模板中使用just call 方法，如下所示：
<template>
...
{{subItNow(item.value)}}
</template>
并且該方法應該像這樣回傳：
methods: {
subItNow(value){
return value.substring(2)
}
}
或者如果您仍然想使用eval，只需將結果作為方法函式中的回傳值傳遞
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/338991.html
標籤：javascript Vue.js 模板