如何在从视图刀片 laravel 加载的 vue 组件上添加条件? [英] How can I add condition on vue component that is loaded from the view blade laravel?
问题描述
我的刀片 laravel 是这样的:
@extends('layouts.app')@section('内容')...<交易></交易>...@endsection@section('模态')<交易模式/>@endsection查看刀片laravel加载两个vue组件.即事务组件和事务模态组件.所以如果视图刀片执行，它会运行组件
我的交易组件是这样的:
...<a href="#" data-toggle="modal" data-target="#modal-transaction" @click="show(item.id)">查看</a>...<脚本>...导出默认{...方法: {显示(ID){....}}}我的交易模式是这样的:
<div id="modal-transaction" class="modalfade" tabindex="-1" role="dialog">...<脚本>导出默认{...}
在脚本中，如果视图刀片被调用，事务模式组件将运行.如果用户单击查看，我希望事务模式运行.如果用户不点击查看，事务模态组件不执行
我该怎么做?
您正在混合 Vue 组件的实例化和 Bootstrap 的模态事件触发.
您可以做的是使用 Bootstrap modal 事件.下面的示例代码:
<div id="modal-transaction" class="modalfade" tabindex="-1" role="dialog">...<脚本>导出默认{方法: {onModalOpen() {//当模态打开时做一些事情},onModalClose() {//当模态关闭时做一些事情}},安装(){$('#modal-transaction').on('shown.bs.modal', this.onModalOpen.bind(this))$('#modal-transaction').on('hidden.bs.modal', this.onModalClose.bind(this))}}
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?
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>
这篇关于如何在从视图刀片 laravel 加载的 vue 组件上添加条件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
