Using Methods inside Computed Properties in vueJs

Question

I'm trying to call a method inside of a computed property. My code is more complicated, but calling the method doesn't seem to even work in this simple example:

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>

As you can see by running the snippet, the value of doubleX is not getting rendered.

thanksd · Accepted Answer · 2017-06-14 15:24:04Z

34

You need to reference your component's methods via 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>

edited Jun 14, 2017 at 15:24

answered Jun 14, 2017 at 15:16

thanksd

55.8k23 gold badges167 silver badges155 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Yassin Kisrawi Over a year ago

Great Thanks for you sir :) Still have a question, is it possible to call a function directly into the html ? meaning can i do something like result: {{ augmented(2) }}

thanksd Over a year ago

Yep just like that {{ augmented(2) }}

thanksd Over a year ago

@SanjaysinhZala If you're saying that you have a computed property called augmented and you want to reference the value of that property in your template, then you would just write {{ augmented }}

Sanjaysinh Zala Over a year ago

@thanksd i am saying that if doubleX and augmented both are in computed then how augmented property will call from doubleX.

thanksd Over a year ago

@SanjaysinhZala Within a computed, you can reference other computed just like regular properties (i.e. this.augmented or this.doubleX). See the docs: vuejs.org/v2/guide/computed.html

Collectives™ on Stack Overflow

Using Methods inside Computed Properties in vueJs

1 Answer 1

5 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Related