Reputation: 127
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: 14101
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:
this.$set
Upvotes: 2
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
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
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
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