如何在从视图刀片laravel加载的vue组件上添加条件? [英] How can I add condition on vue component that is loaded from the view blade laravel?

问题描述

我的视图刀片laravel是这样的:

My view blade laravel like this :

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

视图刀片laravel加载两个vue组件.分别是事务组件和事务模态组件.因此，如果执行了视图刀片，它将运行组件

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>

我的交易模式如下:

<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

我该怎么办?

推荐答案

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

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

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

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>

这篇关于如何在从视图刀片laravel加载的vue组件上添加条件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！