如何在从视图刀片laravel加载的vue组件上添加条件？

Question

我的视图刀片laravel像这样：

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

视图刀片laravel加载两个vue组件。 分别是交易组件和交易模式组件。 因此，如果执行了视图刀片，它将运行组件

我的交易组件是这样的：

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

我的交易模式如下：

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

从脚本中，如果调用了视图刀片，则将运行事务模式组件。 如果用户单击视图，我希望运行交易模式。 如果用户未单击视图，则不会执行事务模式组件

我该怎么做？

Answer 1

您正在混合Vue组件的实例化和Bootstrap的模式事件触发。

您可以使用Bootstrap模态事件 。 下面的示例代码：

<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>