Блог

Главная - Вопросы по программированию - Почему я не могу получить доступ к своей функции данных из своего вычисляемого свойства?

Почему я не могу получить доступ к своей функции данных из своего вычисляемого свойства?

#javascript #vue.js

Вопрос:

У меня есть это в моих данных :

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

И у меня есть вычисляемое свойство, подобное этому :

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

Когда я вызываю свои вычисляемые свойства, как это, в моем смонтированном.

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

Поэтому я попытался посмотреть, что внутри this , но там только содержимое из вычисленных(sayHello и SayHi), я не могу получить доступ к своим значениям в своих данных.

Мой вопрос в том, как я могу получить доступ к data данным с моего компьютера ? Я хочу sayHello , чтобы они отображались hello из моих данных.

Комментарии:

1. Почему ваше вычисляемое свойство возвращает вложенный объект с функциями? Кроме того, вложенные функции, вероятно, должны быть определены как функция стрелки, чтобы иметь доступ к лексическому этому.

2. Возможно, это также связано с жизненным циклом компонента vuejs.org/v2/guide/instance.html#Lifecycle-Diagram

3. Я попробовал функцию стрелки на вычисляемой, но не во вложенной функции ! Спасибо. Это потому, что это «услуга» от angularjs. Это способ использовать его повторно, так что мне не нужно много рефакторинговать.

Ответ №1:

Просто назначьте 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>

Это работает нормально, но это не работа вычисляемого свойства, которое должно использоваться для возврата некоторых данных на основе других свойств

Ответ №2:

Ваши вычисленные функции неверны. Это должно быть:

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

То, как вы это написали, означает, что ключевое this слово будет ссылаться на сам контекст объекта, а не на контекст компонента.

Ответ №3:

Вы неправильно используете вычисляемое свойство. Вычисляемые свойства должны возвращать значение;

Попробуй вот так.

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

и доступ, как это.sayHello или {{sayHello}} в шаблонах.

Если вы пытаетесь использовать вычисляемый сеттер, вы можете использовать его в качестве примера ниже:

 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]
    }
  }
}

Более подробная информация здесь https://vuejs.org/v2/guide/computed.html

Метки: