Vue
HTML
<div id="app">
<pre>cat2.reference = {{ cat2.reference }}</pre>
</div>
CSS
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
#app {
background: #fff;
border-radius: 4px;
padding: 20px;
transition: all 0.2s;
}
li {
margin: 8px 0;
}
h2 {
font-weight: bold;
margin-bottom: 15px;
}
del {
color: rgba(0, 0, 0, 0.3);
}
Vue
new Vue({
el: "#app",
data: () => {
const data = {
cat1 : {name: "Category 1", reference : false},
cat2 : {name: "Subcategory 2", get reference() { return data.cat1 }}
}
console.log(data.cat2.reference)
return data
},
mounted () {
setTimeout(() => this.cat1.name = 'Foo', 2000)
}
})