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

Posted 2023-02-22

【中文标题】如何在从视图刀片 laravel 加载的 vue 组件上添加条件？

【英文标题】：How can I add condition on vue component that is loaded from the view blade laravel?

【发布时间】：2018-09-14 19:25:08

【问题描述】：

我的视图刀片 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>

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

我该怎么做？

【问题讨论】：

您是否希望在页面加载时隐藏事务模式并在单击按钮时显示它？

@Markandeya 是的，我就是这个意思

你有点混合了 vue 组件的实例化和引导模式触发器。你可以做的是使用引导模式事件

@anasceym 是的。好像我用过

在使用引导模式时，您应该按照@anasceym 的建议进行操作。至于你问的问题，我希望我的回答能给出解决方案。

【参考方案1】：

您正在混合 Vue 组件的实例化和 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 执行时，调用了事务模态组件。所以如果模态打开或没有。交易模式组件将被执行

当然会被调用..你可以把只在模态打开时才应该调用的函数放在onModalOpen()中