Vue.js：无法从函数/方法访问数据

Question

当我尝试从fnTwo() 和fnThree() 访问this.perMonth 但在fnOne() 中工作时，我得到了undefined 的价值。我可以从data(){} 运行一个函数，并且可以返回一些值，但不能返回data(){} 中的值，例如this.perMonth（检查fnThree()）

Vue.component('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.com/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>

另外，请考虑我是否有我喜欢处理的嵌套数据数组：

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

Answer 1

从 data 方法中调用 Vue 实例的方法是有问题的，因为尚未设置数据属性。因此，在这些方法中对数据属性的任何引用（在您的情况下为 this.perMonth）都将返回 undefined。

在created 或mounted 挂钩中设置valFromFnTwo 和valFromFnThree 的值。这些钩子在data 方法返回后触发，因此对数据属性的引用将按预期工作。

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

Answer 2

我认为您遇到此问题是因为 JS 引擎的 Hoisting 行为。

不要在数据中声明它，而是使用计算属性：

computed: {
  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;
  }
}

然后您可以在模板中渲染它<p>{{ fnTwo }}</p> 甚至<p>{{ fnTwo()</p> 两者都应该可以工作。