Как можно обратиться к свойству компоненты в шаблоне (во vue)?

Question

[nurdus]

Добрый вечер.
Есть такой код:

// объект с "контентом"
const content = {
  rules: { 
    'header': 'aaa',
    'text': 'bbb',
  },
}

// компонент-потомок
Vue.component('rules', {
  props: ['content'],
  data: function () {
    return {
      text: this.content.rules
    }
  },
  template: '#rules'
});

// основной "объект" экземпляра
const store = function () {
  return {
    content: content,
    }
  }
}

// экземпляр
const vm = new Vue({
  el: '#app',
  data: store,
}

Как можно обратиться к свойству text в rules (т.е. сейчас обращаюсь так: content.rules.header, а хотелось бы text.header)?

Answer 1

[Evgeny Kulakov]

Попробуйте так:

Vue.component('rules', {
  props: ['content'],
  data: function () {
    return {
      text: null
    }
  },
  mounted() {
    this.text = { ...this.content.rules}
  }
  template: '#rules'
});

Comments

[nurdus]

Спасибо, но я имел ввиду в шаблоне, т.е.
{{ rules.text.header }} - так не работает (rules.text = null),
а вот так работает: {{ content.rules.header }}

[Evgeny Kulakov]

nurdus, в шаблоне rules должно вот так теперь работать {{ text.header }} Или вы про какой шаблон?

[nurdus]

Про этот самый... и не работает {{ text }}, даже так:

Vue.component('rules', {
  data: function () {
    return {
      text: '222'
    };
  },
  template: '#rules'
});
Говорит, что text "не определено". Может корневому экземпляру что-то нужно передать?!

[nurdus]

В общем буду искать почему не работает... раз вы говорите, что должно работать.

[Evgeny Kulakov]

nurdus, https://codepen.io/kerf/pen/YEeOvq

[nurdus]

Премного благодарен.
Буду разбираться :)