Reputation: 354
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
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
Reputation: 60
May be you should use watcher on ruleForm.volexp
instead of Computed properties to set ruleForm.vol
.
Upvotes: 1