[Vuejs]-Presentation Component in Vue2

0đź‘Ť

Define a component that wraps all your “floating-sidebox” components. You can access the “floating-sideboxes” via this.$children and use their title etc. as navigation placeholder. Since $children is an array you can easily represent the currently visible entity with and index

...
data: function() {
   sideboxes: [],
   currentIndex: null
},
...
mounted: function() {
   this.sideboxes = this.$children;
   this.currentIndex= this.$children.length > 0 ? 0 : null;
},
...
computed: {
    current: function() {
       return this.currentIndex ? this.sideboxes[this.currentIndex] : null;
    }
}

You can then bind in the template of the wrapping view

<ul>
    <li v-for="(sidebox, index) in sideboxes" @click="currentIndex = index"><!-- bind to prop like title here --></li>
</ul>

<div>
   <!-- binding against current -->
</div>

JSfiddle with component https://jsfiddle.net/ptk5ostr/3/

Leave a comment