为什么我不能从我的计算属性访问我的数据函数？

约翰·W·史密斯

我的数据中有这个：

 data() {
    return {
      hello: "hello",
   }
}

我有一个这样的计算属性：

computed: {
    serviceHello() {
      return {
        sayHello() {
          console.log(this.hello);
        },
        sayHi(){
          console.log("hi");
        }
    }
}

当我在我的mounted中调用我的计算属性时。

this.serviceHello.sayHello(); // console : undefined
this.serviceHello.sayHi(); //console write "hi"

所以我试图看看里面this有什么，但只有来自计算（sayHello 和 sayHi）的内容，我无法访问我的数据中的值。

我的问题是，如何data从我的计算中访问？我希望sayHello显示hello来自我的数据。

布萨扎布拉欣

只需分配this给一个全局变量并在返回的函数中使用：

new Vue({
  el: "#app",
  data() {
    return {
      message: 'Welcome to Vue !',
    };
  },
  computed: {
    serviceHello() {
      let vm = this //assign it here to a global variable vm
      return {
        sayHello() {
          console.log(vm.message);//use vm here
        },
        sayHi() {
          console.log("hi");
        }
      }
    },
  },
  methods: {
    doSomething() {
      this.serviceHello.sayHello();
      this.serviceHello.sayHi();
    }
  },
  mounted(){
   this.serviceHello.sayHello();
      this.serviceHello.sayHi();
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">

  <h1>{{ message }}</h1>

  <button @click="doSomething">Say hello.</button>
</div>

这工作正常，但这不是计算属性的工作，它应该用于根据其他属性返回一些内容

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。