Question

我希望可以将计算结果传递给参数。
代码如下：

<el-input v-model="ruleForm.volexp"/>{{ calVol }} = {{ ruleForm.vol }}

data() {
  return {
    ruleForm: { volexp: '', vol: 0 }
  }
},
computed: {
  calVol: function() {
    try {
      const r = eval(this.ruleForm.volexp).toFixed(2)
      this.ruleForm.vol = r 
      return r
    } catch (err) {
      return ''
    }
  }
},

但是，它将引发警告：

“ calVol”计算属性中出现意外的副作用。

如何解决？

Answer 1

可能是您应该在ruleForm.volexp上使用观察程序，而不是在计算属性上设置ruleForm.vol。

Answer 2

您无法在data中设置computed。而且看起来您的代码存在逻辑问题，视图{{ calVol }} = {{ ruleForm.vol }}上的数据将永远相等，因此{{ calVol }} = {{ calVol }}也可能保持不变。

接着上述问题，可能是您的警告来自。如果是某种公式计算器，它应该像：

<el-input v-model="ruleForm.volexp"/>{{ ruleForm.volexp }} = {{ calVol }}

data() {
  return {
    ruleForm: { volexp: ''}
  }
},
computed: {
  calVol: function() {
    try {
      return eval(this.ruleForm.volexp).toFixed(2);
    } catch (err) {
      return '';
    }
  }
},

更新根据您上面写给@ tony19的评论： @ tony19，因为参数ruleForm将被提交到后端API。我需要同时保留volexp和vol。。如果您使用this.$axios.post('/api/url', {a: this.calVol, b:this.volexp})，则可以像这样axios一样将计算的常规数据发送到后端。任何其他http库的语法都相似。

如何将计算结果传递给vue2.js中的参数

2 个答案: