Данные Vue.js нельзя инициализировать значениями свойств

Question

Должна быть возможность напрямую ссылаться на свойство внутри значения данных.Но почему-то в не работает.Я создал небольшой пример:

https://jsfiddle.net/ay7fue0s/

В качестве обходного пути я сейчас делаю следующее:

computed: {
    foo() {
        this.whyDoesNotWork = this.message;
    }
},
watch: {
    foo() {}
}

Таким образом, вычисляемая функция изменяет данные напрямую.Очень хакерский и, вероятно, не прав.Кто-нибудь знает, что не так с первоначальным примером просто ссылки на свойство?

Answer 1

Vue.component('child', {
  props: ['message'],
  data() {
    return {
        whyDoesNotWork: this.message
    }   
  },
  template: '<span>{{ whyDoesNotWork }}</span>'
})

var app = new Vue({
  el: '#app',
  data: {
    hello: {},
    message: 'someting'
  },
  components:['child'],
  template: '<child :message="message"></child>'
})

Не используйте функции стрелок для свойства экземпляра или обратного вызова, поскольку функция стрелки не будет связывать это с экземпляром vue, для которого вы определяете вычисляемое свойство.