在 vueJs 中使用计算属性中的方法答案

【问题标题】：Using Methods inside Computed Properties in vueJs在 vueJs 中使用计算属性中的方法
【发布时间】：2017-11-16 19:56:31
【问题描述】：

我正在尝试调用计算属性内的方法。我的代码比较复杂，但是在这个简单的例子中调用方法似乎不起作用：

new Vue({
  el: '#vue-instance',
  data: {
    x: 1
  },
  methods: {
    augmented: function(variable) {
      return (2 * variable);
    },
  },
  computed: {
    doubleX: function() {
      return augmented(this.x);
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<div id="vue-instance">
  <input type="number" v-model="x"> result: {{ doubleX }}
</div>

您可以通过运行 sn-p 看到，doubleX 的值没有被渲染。

【问题讨论】：

标签： methods properties vue.js

【解决方案1】：

你需要通过this引用你组件的方法：

var vm = new Vue({
  el: '#vue-instance',
  data: {
    x: 1
  },
  methods: {
    augmented: function(variable) {
      return (2 * variable);
    },
  },
  computed: {
    doubleX: function() {
      return this.augmented(this.x);
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>

<div id="vue-instance">
  <input type="number" v-model="x"> result: {{ doubleX }}
</div>

【讨论】：

非常感谢您先生 :) 还有一个问题，是否可以直接在 html 中调用函数？意思是我可以做类似结果的事情：{{ augmented(2) }}
是的，就像{{ augmented(2) }}
@SanjaysinhZala 如果您说您有一个名为 augmented 的计算属性，并且您想在模板中引用该属性的值，那么您只需编写 {{ augmented }}
@thanksd 我是说如果 doubleX 和 augmented 都在计算中，那么增强属性将如何从 doubleX 调用。
@SanjaysinhZala 在计算中，您可以像常规属性一样引用其他计算（即this.augmented 或this.doubleX）。请参阅文档：vuejs.org/v2/guide/computed.html