【问题标题】:Electron-vue: 'compute:' does not work [duplicate]Electron-vue:'计算:'不起作用[重复]
【发布时间】:2023-10-26 04:52:01
【问题描述】:

我尝试使用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>

应该&lt;p&gt;{{value}}&lt;/p&gt; 显示计算的 (sw1 + sw2) 值,但它始终显示NaN,尽管当开关状态更改时&lt;p&gt;{{sw1}}&lt;/p&gt;&lt;p&gt;{{sw2}}&lt;&gt;/p&gt; 已正确更改。

为什么computed: 总是返回NaN

【问题讨论】:

    标签: javascript vue.js electron


    【解决方案1】:

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

    检查一下

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

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

    【讨论】: