Tengo esto en mis datos:
data() { return { hello: "hello", } }Y tengo una propiedad calculada como esta:
computed: { serviceHello() { return { sayHello() { console.log(this.hello); }, sayHi(){ console.log("hi"); } } }Cuando llamo a mis propiedades computadas como esta en mi archivo added.
this.serviceHello.sayHello(); // console : undefined this.serviceHello.sayHi(); //console write "hi" Así que traté de ver qué hay dentro de this , pero solo está el contenido del computado (di hola y di hola), no puedo acceder a mis valores en mis datos.
Mi pregunta es, ¿cómo puedo acceder a los data de mi ordenador? Quiero que sayHello muestre el hello de mis datos.
Tus funciones calculadas son incorrectas. Debería ser:
computed: { sayHello() { console.log(this.hello); }, sayHi() { console.log("hi"); } } La forma en que lo escribió significa que la palabra clave this hará referencia al contexto del objeto en sí y no al contexto del componente.
Está utilizando de manera incorrecta una propiedad calculada. Las propiedades calculadas deben devolver un valor;
Prueba de esta manera.
computed: { sayHello() { return this.hello; }, sayHi() { return "hi"; } }y acceda como this.sayHello o {{sayHello}} en las plantillas.
Si está tratando de usar un Setter calculado, puede usarlo como este ejemplo a continuación:
computed: { fullName: { // getter get: function () { return this.firstName + ' ' + this.lastName }, // setter set: function (newValue) { var names = newValue.split(' ') this.firstName = names[0] this.lastName = names[names.length - 1] } } }Más información aquí https://v2.vuejs.org/v2/guide/computed.html
Simplemente asigne this a una variable global y utilícelo dentro de la función devuelta:
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>Esto funciona bien, pero no es el trabajo de la propiedad calculada que debe usarse para devolver algunas cosas basadas en otras propiedades.