CODEWITHSUNDEEP
vue.js
user1997198
user1997198

Reputation: 127

vue js 2 way data binding not updating

so i have a quick Vue JS question that seems very strange, i have the following

var home = new Vue({
 el: '#home',
 data:{
    title: 'welcome to the app'
 }
});

Which works fine, and title in my HTML gets updated fine...

now when i do this

home.$data.title = 'this is the new title'

the html 

  <div class="app-topbar">{{title | uppercase}}</div>

Does not update, do i have to force an update to the data binding or something?

Thanks Sam

Upvotes: 5

Views: 14102

Answers (5)

Ehvince
Ehvince

Reputation: 18415

In last resort I've also used Vue.forceUpdate()`.

But indeed here looks like you should simply use home.title.

my checklist for this kind of problem:

  • computed property ?
  • this.$set
  • beware of arrow functions and lodash
  • with components: .sync

Upvotes: 2

Farveaz
Farveaz

Reputation: 608

For people still searching for this, the issue may be caused by caveats.

The best way to update data and force an event in the instance is to use Vue.set.

Follow the link : https://v2.vuejs.org/v2/guide/list.html#Caveats

Upvotes: 2

midan888
midan888

Reputation: 179

When you want to update data of an instance, the documented way is to set new data by this.$set('title', 'this is the new title); when you do that, actually what framework does, is re-rendering your template and the html updates

http://vuejs.org/api/instance-methods.html#vm-\$set(_keypath\,value)

Upvotes: 0

swift
swift

Reputation: 1108

This works fine for me. Just set home.title, like this: http://jsfiddle.net/6x2v9y20/1/

Maybe you're trying to access home.title before the Vue item has been created?

Upvotes: 1

Stefkay
Stefkay

Reputation: 179

You dont need home.$data.title, if your within your Vue instance you can simply alter the title value by using this.title.

Here's a quick fiddle.

http://jsfiddle.net/stefkosmo/6x2v9y20/

Upvotes: 0

Related Questions