I have this in my template:
<div v-if="detail" v-with="detail" v-component="detail">
<button v-on="click:close">Close</button>
<h1>{{ name }}</h1>
</div>
When I try to update the root detail variable it duplicates the component.
<!--v-if-start-->
<div>
<button>Close</button>
<h1>Foo</h1>
</div>
<!--v-component-->
<div>
<button>Close</button>
<h1>Foo</h1>
</div>
<!--v-component-->
<!--v-if-end-->
Here's my HTML, JS and a fiddle so you can see if I'm doing anything dumb off the bat.
If I switch the v-if to a v-show it works as expected.
<div style="float: left; width: 40%;">
<div v-if="detail" v-with="detail" v-component="detail">
<button v-on="click:close">Close</button>
<h1>{{ name }}</h1>
</div>
</div>
<div style="float: right; width: 40%;">
<div>Items clicked below are creating multiple detail components.</div>
<ul>
<li v-repeat="items" v-component="item" v-on="click:setDetail">
{{ name }}
</li>
</ul>
</div>
new Vue({
el: 'body',
data: {
detail: false,
items: [
{ name: "Foo" },
{ name: "Bar" }
]
},
components: {
detail: {
methods: {
close: function () {
this.$root.detail = false;
}
}
},
item: {
methods: {
setDetail: function () {
this.$root.detail = this.$data;
}
}
}
}
});
Here's a jsfiddle: http://jsfiddle.net/ucLafhck/5/
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4