Electron-vue：＆＃39;计算：＆＃39;不起作用

Question

我尝试使用element-ui实现一个简单的示例。 有两个＆＃39;开关＆＃39; （）每个都具有活动状态的值：2和1.开关＆＃39;值显示在<p>{{sw1}}</p>和<p>{{sw2}}<>/p>中。

以下是组件来源＆＃39; Sample.vue＆＃39;：

<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>

假设<p>{{value}}</p>显示了计算的（sw1 + sw2）值，但是，尽管NaN并且<p>{{sw1}}</p>在<p>{{sw2}}<>/p>和computed:被正确更改时它始终显示NaN开关的状态发生了变化。

为什么{{1}}始终返回{{1}}？

Answer 1

您不应该使用箭头功能。请进行测试并检查代码中的this是什么。

检查

computed: {
  value: function () {
    return Number(this.sw1) + Number(this.sw2)
  }
}

将引擎绑定应用程序实例绑定到此功能。箭头功能是不可能的。