Binding to an undefined property works, but the DOM updates intermittently
See original GitHub issueIn the following code, the Vue instance contains a hash of tabs, each of which has the property a
. However a
is initially undefined. The first part of the HTML allows you to change tabs, while the second allows you to change and view the value of a
from the current tab. The confusing thing is that if you click on a number (1, 2, or 3), the value of currentTab.a
does change, but the DOM does not. However if you switch tabs and then switch back, the DOM does update.
Here’s a jsfiddle, but I’ve copied the code below as well:
<h2>Choose Tab</h2>
<div
v-repeat="tabs"
v-class="selected: $key == currentTabName"
v-on="click: currentTabName = $key">{{$key}}</div>
<h2>Value of A</h2>
<div
v-repeat="options"
v-on="click: currentA = $value"
v-class="selected: $value == currentA">{{$value}}</div>
var vm = new Vue({
el: "body",
data: {
tabs: {
//Note that the tabs do not have a value for a
"Tab1": {},
"Tab2": {}
},
currentTabName: "Tab1",
options: [1, 2, 3]
},
computed: {
//Returns the current tab object based on the tabName
currentTab: function () {
return this.tabs[this.currentTabName];
},
//Gets/sets the current tab's value of a
currentA: {
get: function () {
return this.currentTab.a;
},
set: function (val) {
alert("Current a changed!");
this.currentTab.a = val;
}
}
}
});
This almost working behaviour is very confusing. I suspect the problem is that the view layer doesn’t add currentA as a dependency because it is initially undefined. Ideally when it becomes defined it will be added as a dependency, but if this isn’t possible, a warning message here indicating that binding to an undefined property screws everything up would be very very helpful.
Issue Analytics
- State:
- Created 9 years ago
- Comments:7 (3 by maintainers)
Top GitHub Comments
A bit later 😄 this gonna not work if the value for the computed property comes from a vuex store
If it doesn’t contain
a
on first pass, then yourcurrentA
computed property won’t pick it up as a dependency, so essentially you got a “dead” computed property that never updates.I think I’ve mentioned in the docs the best practice is to have a predictable data structure (i.e. explicitly list
a: undefined
in your tab objects before compilation)And @builtap 's solution also works 😃