There are two components in my code
The first component, which is the parent component, looks like this :
<template>
<ul class="list-group">
<li v-for="item in invoices" class="list-group-item">
<div class="row">
...
<div class="col-md-7">
...
<a href="javascript:"
class="toggle-show"
aria-expanded="false"
data-toggle="collapse"
:data-target="'#' + item.id"
@click="show(item.id)">
Show <span class="caret"></span>
</a>
</div>
</div>
<div class="collapse" :id="item.id">
<order-collapse/>
</div>
</li>
</ul>
</template>
<script>
import orderCollapse from './orderCollapse.vue'
export default {
...
components: {orderCollapse},
data() {
return {
invoices: [
{
id: 1,
...
},
{
id: 2,
...
},
{
id: 3,
...
}
]
}
},
methods: {
show(id) {
// The orderCollapse component will be executed if this method is run
}
},
}
</script>
The second component, which is the child component, looks like this :
<template>
<table class="table table-bordered table-collapse">
<!-- This is used to display details by id -->
</table>
</template>
<script>
export default {
name: 'order-collapse',
...
}
</script>
If the parent component is executed, the child component will automatically be executed as well
I want to prevent the child component from being executed when the parent component is executed
I want the child component to be executed only when a user clicks on the "Show" link
How can I achieve this?