javascript - 如何将 var obj 传递给 Vue.js 中的方法

Question

代码如下:

<el-input v-model="ruleForm.vol" @change="calValue(vol,ruleForm.vol)">
  <template slot="suffix">{{ vol }}</template>
</el-input>

data() {
  return {
    vol: 0,
    ruleForm: {
       vol: 0
    }      
  }
},
methods: {
  calValue(objCal, obj) {
    console.log(objCal)
    console.log(eval(obj))
    objCal = eval(obj)
    console.log(objCal)
  }
}

当我在输入框中输入1+1时，后缀没有改变。怎么解决？

Answer 1

首先(你可能已经知道了，但是......)，避免使用 eval在生产中，尤其是当用户输入发挥作用时。这会使您的应用程序面临不同的安全漏洞，即脚本注入(inject)和跨站点脚本(了解有关 XSS 的更多信息)。

其次，您没有为 vol 设置新值在这里，因此它不会改变。在你的calValue里面方法，请确保为其设置一个新值。

<el-input v-model="ruleForm.vol" @change="calValue(vol, ruleForm.vol)">
  <template slot="suffix">{{ vol }}</template>
</el-input>

data() {
  return {
    vol: 0,
    ruleForm: {
       vol: 0
    }      
  }
},
methods: {
  calValue(objCal, obj) {
    console.log(objCal)
    console.log(eval(obj))
    objCal = eval(obj)
    this.vol = objCal
  }
}

(!)但是更好的方法是使用 Vue 的 computed properties 。有了这些，您的代码现在看起来像:

<el-input v-model="vol">
  <template slot="suffix">{{ result }}</template>
</el-input>

data() {
  return {
    vol: 0
  }
},
computed: {
  result () {
    return eval(this.vol)
  }
}

请注意，您不需要方法和 @change听众，自 v-model已经在每个 @input 上更改了映射值幕后(更多信息here)。

再说一遍 - 如果您正在构建计算器或类似的东西并希望了解安全性，您可能会解析用户输入 1 + 1进入{argument} {operator} {argument}然后调用基于 operator 的方法用户使用过的。

希望这有帮助!