I am getting value as undefined when I try to access this.perMonth from fnTwo() and fnThree() but works in fnOne(). I can run a function from data(){} and can return some values but cannot return that's in data(){} eg.this.perMonth (check fnThree())

Vueponent('BuySubscription', {
  template: '#buy-subscription',
  data() {
    return {
      perMonth: 19,
      valFromFnTwo: this.fnTwo(),
      valFromFnThree: this.fnThree()
    }
  },
  methods: {
    fnOne() {
      console.log("from fnOne: get data > perMonth: " + this.perMonth);
      return this.perMonth
    },
    fnTwo() {
      console.log("from fnTwo: get data > perMonth : " + this.perMonth);
      return this.perMonth
    },
    fnThree() {
      console.log("from fnThree: get data > perMonth " + this.perMonth);
      console.log("from fnThree: get data > valFromFnTwo: " + this.valFromFnTwo);
      return 123 // retruns static value
    }
  }
});

new Vue({
  el: '#app',
});

body { font-family: arial; font-size: 12px}
p {margin: 0}

<script src=".4.2/vue.min.js"></script>

<div id="app" class="col-lg-6 d-flex align-items-center">
  <buy-subscription></buy-subscription>
</div>

<script type="text/x-template" id="buy-subscription">
  <div>
    <p>value from data > perMonth: {{perMonth}}</p>
    <p>value from data > valFromFnTwo:  {{valFromFnTwo}} <span style="color: red"> <-- getting Undefined here (see console)</span></p>
    <p>value from fnOne(): {{fnOne()}}</p>
    <p>value from fnTwo(): {{fnTwo()}}</p>
    <p>value from fnThree(): {{fnThree()}}</p>
  </div>
</script>

I am getting value as undefined when I try to access this.perMonth from fnTwo() and fnThree() but works in fnOne(). I can run a function from data(){} and can return some values but cannot return that's in data(){} eg.this.perMonth (check fnThree())

Vue.ponent('BuySubscription', {
  template: '#buy-subscription',
  data() {
    return {
      perMonth: 19,
      valFromFnTwo: this.fnTwo(),
      valFromFnThree: this.fnThree()
    }
  },
  methods: {
    fnOne() {
      console.log("from fnOne: get data > perMonth: " + this.perMonth);
      return this.perMonth
    },
    fnTwo() {
      console.log("from fnTwo: get data > perMonth : " + this.perMonth);
      return this.perMonth
    },
    fnThree() {
      console.log("from fnThree: get data > perMonth " + this.perMonth);
      console.log("from fnThree: get data > valFromFnTwo: " + this.valFromFnTwo);
      return 123 // retruns static value
    }
  }
});

new Vue({
  el: '#app',
});

body { font-family: arial; font-size: 12px}
p {margin: 0}

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

<div id="app" class="col-lg-6 d-flex align-items-center">
  <buy-subscription></buy-subscription>
</div>

<script type="text/x-template" id="buy-subscription">
  <div>
    <p>value from data > perMonth: {{perMonth}}</p>
    <p>value from data > valFromFnTwo:  {{valFromFnTwo}} <span style="color: red"> <-- getting Undefined here (see console)</span></p>
    <p>value from fnOne(): {{fnOne()}}</p>
    <p>value from fnTwo(): {{fnTwo()}}</p>
    <p>value from fnThree(): {{fnThree()}}</p>
  </div>
</script>

Also, please consider if I have nested array of data which I like to process:

  data() {
    return {
      perMonth: 19,
      someVarViaFns: [
        {
          valFromFnTwo: this.fnTwo(1),
          valFromFnThree: this.fnThree(2) 
        },        
        {
          valFromFnTwo: this.fnTwo(5),
          valFromFnThree: this.fnThree(9) 
        },
      ]
    }
  }

• javascript
• vue.js
• vuejs2
• vue-ponent

Share Improve this question Follow edited Aug 10, 2017 at 14:44 Syed asked Aug 10, 2017 at 14:04 SyedSyed 16.6k1515 gold badges127127 silver badges157157 bronze badges 1

• you can use puted properties: vuejs/v2/guide/puted.html – Tomer Commented Aug 10, 2017 at 14:58

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

Calling the Vue instance's methods from within the data method is problematic because the data properties have not been set yet. So, any references to data properties in those methods (this.perMonth in your case) will return undefined .

Set the values of valFromFnTwo and valFromFnThree in the created or mounted hook instead. These hooks fire after the data method has returned, so references to data properties will work as expected.

data() {
  return {
    perMonth: 19,
    valFromFnTwo: null,
    valFromFnThree: null
  }
},
mounted() {
  this.valFromFnTwo = this.fnTwo();
  this.valFromFnThree = this.fnThree();
}

I think you're having this issue because of the Hoisting behavior of the JS Engine.

Instead of declaring it in your data use puted properties:

puted: {
  fnTwo() {
    // you can do other operations here also
    // the currency variables is just an example. not mandatory
    let currency = 'usd';

    return "value from fnTwo: " + this.perMonth + ' ' + currency;
  }
}

Then you can render it in your template <p>{{ fnTwo }}</p> or even <p>{{ fnTwo()</p> both should work.