While this may not directly address your query, it does provide a solution for achieving the desired functionality. You can view a demonstration on jsfiddle
Here is the template:
<div id="vue-instance">
<ul class="item-list">
<li class="item" v-for="item in inventory" @click="dispalyDetails(item)">
<div class="header">{{ item.name }} - ${{ item.price }}</div>
<div v-if="item.displayed" class="details">
<div class="details__inner">
{{ item.details }}
</div>
</div>
</li>
</ul>
</div>
Vue script:
var vm = new Vue({
el: '#vue-instance',
data: {
inventory: [
{name: 'MacBook Air', price: 1000, details: 'Lorem ipsum', displayed: false},
{name: 'MacBook Pro', price: 1800, details: 'Lorem ipsum', displayed: false},
{name: 'Lenovo W530', price: 1400, details: 'Lorem ipsum', displayed: false},
{name: 'Acer Aspire One', price: 300, details: 'Lorem ipsum', displayed: false},
{name: 'Aspire One', price: 700, details: 'Lorem ipsum', displayed: false}
]
},
methods: {
deselectItems() {
this.inventory.forEach((item) => {
item.displayed = false;
});
},
dispalyDetails(item) {
if (!item.displayed) {
this.deselectItems();
}
item.displayed = !item.displayed;
}
}
});
SCSS styling:
.item-list {
position: relative;
display: flex;
flex-wrap: wrap;
width: 80%;
margin: 0 auto;
}
.item {
width: 33.33%; // adjust accordingly in mq
box-sizing: border-box;
}
.header {
box-sizing: border-box;
padding: 10px;
}
.details {
border: 1px solid red;
min-height: 200px;
}
.details__inner {
position: absolute;
left: 0;
width: 100%;
min-height: 200px;
border: 1px solid green;
}