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，尤其是在用户输入起一定作用的情况下。这将使您的应用程序面临不同的安全漏洞，这里就是脚本注入和跨站点脚本（有关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的映射值（有关{{3}的更多信息） }。

再次-如果您要构建计算器或类似工具并且希望了解安全性，则可以将用户输入1 + 1解析为{argument} {operator} {argument}，然后基于用户使用的operator。

希望这会有所帮助！

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

1 个答案: