Question

我的视图刀片如下：

@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模态events。示例代码如下：

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

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

1 个答案: