Electron-vue：'计算：'不起作用[重复]

Posted 2023-02-22

【中文标题】Electron-vue：\'计算：\'不起作用[重复]

【英文标题】：Electron-vue: 'compute:' does not work [duplicate]Electron-vue：'计算：'不起作用[重复]

【发布时间】：2018-06-13 11:13:57

【问题描述】：

我尝试使用element-ui 实现一个简单的示例。 有两个“开关”()，每个都有活动状态的值：2 和 1。开关的值显示在 <p>sw1</p> 和 <p>sw2<>/p> 中，如下所示。

这里是组件源'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>

应该<p>value</p> 显示计算的 (sw1 + sw2) 值，但它始终显示NaN，尽管当开关状态更改时<p>sw1</p> 和<p>sw2<>/p> 已正确更改。

为什么computed: 总是返回NaN？

【参考方案1】：

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

检查一下

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

Vue 在后台绑定应用程序实例到这个函数。箭头函数是不可能的。