My attempt to create a simple example using the element-ui library was not successful.
There are two 'switches' with different active state values: 2 and 1. The values of the switches are supposed to be displayed in <p>{{sw1}}</p> and <p>{{sw2}}<>/p>.
https://i.sstatic.net/MeO1t.png
The component source code is shown below in 'Sample.vue':
<template>
<div class="wrapper">
<el-switch v-model="sw1" active-value=2 inactive-value=0></el-switch>
<p>{{sw1}}</p>
<el-switch v-model="sw2" active-value=1 inactive-value=0></el-switch>
<p>{{sw2}}</p>
<p>{{value}}</p>
</div>
</template>
<script>
export default {
data () {
return {
sw1: 0,
sw2: 0
}
},
computed: {
value: () => {
return Number(this.sw1) + Number(this.sw2)
}
}
}
</script>
Even though the values for <p>{{sw1}}</p> and <p>{{sw2}}<>/p> change correctly when the switch status changes, the computed value <p>{{value}}</p> always shows NaN.
What could be causing the computed: property to consistently return NaN?