How can I add condition on vue component that is loaded from the view blade laravel?

Question

My view blade laravel like this :

@extends('layouts.app')
@section('content')
    ...
        <transaction></transaction>
    ...
@endsection
@section('modal')
    <transaction-modal/>
@endsection

The view blade laravel load two vue component. That are transaction component and transaction modal component. So if the view blade executed, it will run the components

My transaction component like this :

<template>
    ...
        <a href="#" data-toggle="modal" data-target="#modal-transaction" @click="show(item.id)">View</a>
    ...
</template>
<script>
    ...
    export default {
        ...
        methods: {
            show(id) {
                ....
            }
        }
    }
</script>

My transaction modal like this :

<template>
    <div id="modal-transaction" class="modal fade" tabindex="-1" role="dialog">
        ...
    </div>
</template>
<script>
    export default {
        ...
    }
</script>

From the script, the transaction modal component will run if the view blade called. I want the transaction modal run if user click view. If user not click view, the transaction modal component not executed

How can I do it?

Answer 1

You are mixing of instantiation of Vue components and Bootstrap's modals event triggered.

What you can do is using Bootstrap modal events. Example code below:

<template>
    <div id="modal-transaction" class="modal fade" tabindex="-1" role="dialog">
        ...
    </div>
</template>
<script>
    export default {
        methods: {
            onModalOpen() {
                // Do something when modal opens
            },
            onModalClose() {
                // Do something when modal closed
            }
        },
        mounted() {
            $('#modal-transaction').on('shown.bs.modal', this.onModalOpen.bind(this))
            $('#modal-transaction').on('hidden.bs.modal', this.onModalClose.bind(this))
        }
    }
</script>