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

1
votes

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?

1
laravellaravel-5vue.jsvuejs2vue-component
Do you wish to hide the transaction-modal on page load and show it on clicking a button? – Markandeya
@Markandeya Yes that's what I mean – Success Man
You kind of mixing the instantiation of vue components and bootstrap modal trigger. What you can do is using bootstrap modal events – anasceym
@anasceym Yes. Seems I use it – Success Man
While using bootstrap modals, you should do what @anasceym suggested. As to the what you asked, I hope my answer gives the solution. – Markandeya

1 Answers

0
votes

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>