CODEWITHSUNDEEP
vue.jsbinding
Petur Ulev
Petur Ulev

Reputation: 97

Vue div text is not dynamically updating

I have a div element:

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

But each time data is updated (I verify that with console.log), text in the div is not changing. Do you know how to change the text in the div dynamically as data changes

Upvotes: 1

Views: 1393

Answers (1)

tao
tao

Reputation: 90277

Vue does not actively look for any moustache syntax on your page and replaces it. It only controls what you tell it to (the template).

To tell Vue to control a particular template, you have to instantiate Vue with it.

Basic example:

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>

Also note data is a reserved name in a Vue instance. It expects either an object or a function returning an object. Any property defined on that object at compile time is reactive out of the box. So you could say data is a reactive wrapper for the Vue instance. All its properties are available in the template and you don't have to prefix them with data..

Therefore, if you really want to use data as a name in template, you have to define a data property inside data. (i.e: data: () => ({ data: { foo: 'bar'}}) and use it in template as {{data.foo}}.

Upvotes: 2

Related Questions