Почему в компоненте не везде выводит значение $root?

Question

[thisuser]

Слегка знакомлюсь с Vue и заметил странное поведение.

Есть:

new Vue({
    el: '#app',
    created: function(){
      this.getCategories();
    },
    data:{
      content: 'что-то',
...
...

и отдельно компонент:

var VueModal = Vue.extend ({
  template: `<div v-if="$root.modalContent">
                <div>
                  <input type="text" value="{{$root.content}}">
                </div>
                {{$root.content}}
              </div>
...
...

В итоге на выходе получается так:

<div>
	<div>
	  <input type="text" value="{{$root.content}}">
	</div>
	что-то
</div>

Почему в value значение не рендерится, а ниже всё ок?

Answer 1

[0xD34F]

Во-первых, интерполяция с атрибутами не работает, привязка значений осуществляется иначе.

Во-вторых - трогать $root НЕ НАДО. Хотите использовать внешнее значение - передавайте его в компонент как параметр или доставайте из хранилища.

Comments

[thisuser]

Благодарю! всё поправил, всё хорошо. Про $root, да, не раз видел, что трогать его не стоит. экспериментировал )