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

Posted 2023-02-22

【中文标题】在 vueJs 中使用计算属性中的方法

【英文标题】：Using Methods inside Computed Properties in 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 的值没有被渲染。

【参考方案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