CODEWITHSUNDEEP
vue.jsvuejs2vue-component
Ian
Ian

Reputation: 354

How to pass a computed result to a param in vue2.js

I want a computed result can be passed to a param.
The code is below:

<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 ''
    }
  }
},

However, it will throw a warning:

Unexpected side effect in "calVol" computed property.

How to fix it?

Upvotes: 0

Views: 446

Answers (2)

SiarheiK
SiarheiK

Reputation: 837

You can't set data in computed. And it looks like your code have logical issue, it will be forever equal data on your view {{ calVol }} = {{ ruleForm.vol }}, so it could be also {{ calVol }} = {{ calVol }}nothing will be changed.

And following above issue, it could be your warning comes from. If it's some kind of formula calculator, it should be like:

<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 '';
    }
  }
},

UPDATE Depending on comment you wrote above to @tony19: @tony19 because param ruleForm will be submited to the back-end API. I need to keep both volexp and vol.. You can to send computed as regular data to backend like this this.$axios.post('/api/url', {a: this.calVol, b:this.volexp}) in case you using axios. Similar syntax for any other http libriary.

Upvotes: 0

miracle genuis
miracle genuis

Reputation: 60

May be you should use watcher on ruleForm.volexp instead of Computed properties to set ruleForm.vol.

Upvotes: 1

Related Questions