Vue div текст не обновляется динамически

Question

У меня есть элемент div:

<div>{{data}}</div>

Но каждый раз, когда данные обновляются (я проверяю это с console.log), текст в div не меняется. Знаете ли вы, как динамически изменять текст в div при изменении данных

Answer 1

Vue активно не ищет синтаксис усов на вашей странице и заменяет его. Он контролирует только то, что вы ему сообщаете (шаблон).

Чтобы сообщить Vue об управлении конкретным шаблоном, вы должны создать экземпляр Vue с ним.

Basi c пример:

Vue.config.productionTip = false;
Vue.config.devtools = false;

// this instantiates Vue in the element with id="myTemplate"
new Vue({
  el: '#myTemplate',
  data: () => ({
    foo: 'bar'
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<!-- Contents of `#myTemplate` are parsed as Vue template -->
<div id="myTemplate">
  <h2>Inside Vue template: {{foo}}</h2>
  <input v-model="foo">
</div>

<h2>Outside of Vue template: {{foo}}</h2>

Также обратите внимание, data является зарезервированным именем в экземпляре Vue. Он ожидает либо объект, либо функцию, возвращающую объект. Любое свойство, определенное для этого объекта во время компиляции, является реактивным из коробки. Таким образом, вы могли бы сказать, что data является реактивной оболочкой для экземпляра Vue. Все его свойства доступны в шаблоне, и вам не нужно ставить перед ними префикс data..

Поэтому, если вы действительно хотите использовать data в качестве имени в шаблоне, вы должны определить data собственность внутри data. (т.е.: data: () => ({ data: { foo: 'bar'}}) и использовать его в шаблоне как {{data.foo}}.