У меня есть 2 компонента, 1 из которых обрабатывает таблицу <b-table>, а 1 из них обрабатывает модал начальной загрузки <b-modal>
Table.vue выглядит следующим образом:
<template>
<b-container fluid>
<b-row>
<b-col md="24">
<b-table show-empty responsive hover
:items="items"
:fields="fields"
:current-page="currentPage"
:per-page="perPage"
:filter="filter"
fixed="fixed"
@row-clicked="clickRow"
class="text-center"
tdClass="align-middle">
<template slot="manage_column" slot-scope="row">
<p class="p-0 m-0"><a href="#">Edit</a><span class="d-inline-block p-2">|</span><a href="#">Renew</a></p>
<p class="p-0 m-0" v-show="hoverIndex === row.index"><span>...</span></p>
</template>
</b-table>
</b-col>
</b-row>
<b-row>
<b-col md="24" class="my-1">
<b-pagination :total-rows="totalRows" :per-page="perPage" v-model="currentPage" class="my-0" />
</b-col>
</b-row>
<SlideModal :show="this.show ? true : false" />
</b-container>
</template>
<script>
import SlideModal from '../lib/SlideModal.vue'
const items = [
{
manage_column: '',
name_column: 'John Doe',
address_column: '123 W. Oak Ln.'
},
{
manage_column: '',
name_column: 'Jane Doe',
address_column: '123 W. Oak Ln.'
},
{
manage_column: '',
name_column: 'Row Doe',
address_column: '123 W. Oak Ln.'
},
{
manage_column: '',
name_column: 'Joe Doe',
address_column: '123 W. Oak Ln.'
},
{
manage_column: '',
name_column: 'Jack Doe',
address_column: '123 W. Oak Ln.'
},
{
manage_column: '',
name_column: 'Jill Doe',
address_column: '123 W. Oak Ln.'
},
{
manage_column: '',
name_column: 'Jamie Doe',
address_column: '123 W. Oak Ln.'
}
]
export default {
name: 'TableViewListing',
components: {
SlideModal
},
data () {
return {
items: items,
fields: {
address_column: {
label: 'Address'
},
name_column: {
label: 'Name'
},
manage_column: {
label: 'Manage'
}
},
currentPage: 1,
perPage: 3,
totalRows: items.length,
pageOptions: [ 5, 10, 15 ],
filter: null,
hoverIndex: null,
showModal: false
}
},
methods: {
onFiltered (filteredItems) {
this.totalRows = filteredItems.length
this.currentPage = 1
},
clickRow (record, index, event) {
event.preventDefault()
let clickedEle = event.target
this.showModal = false
if (clickedEle.nodeName.toLowerCase() === 'a') {
/*********/
/* Action Link was clicked, trigger Action Link Modal here... */
/*********/
console.log('clicked an a tag most likely in actions column.')
alert('You clicked on the Action: ' + clickedEle.innerText)
} else if (clickedEle.nodeName.toLowerCase() !== 'button') {
/*********/
/* Row was clicked, trigger Row Modal here... */
/*********/
console.dir(this)
this.show = true
console.log('showModal = ' + this.showModal)
console.log('Clicked on a Row, not a button or an a tag.')
console.log(index)
console.dir(record)
alert('You clicked on the Global Row Element...')
}
}
}
}
</script>
<style>
</style>
Чем я пытаюсь подключить событие click к строке таблицы с помощью метода clickRow, чтобы открыть модальное окно в SlideModal.vue здесь:
<template>
<b-modal ref="myModalRef" title="Bootstrap-Vue">
<p class="my-4">Hello from modal!</p>
<div class="d-block text-center">
<h3>Hello From My Modal!</h3>
</div>
<b-btn class="mt-3" variant="outline-danger" block @click="hideModal(this.show)">Close Me</b-btn>
</b-modal>
</template>
<script>
export default {
name: 'SlideModal',
data () {
return {}
},
props: {
show: {
default: false
}
},
methods: {
showModal (val) {
console.log('showModal triggered')
console.log(val)
this.$refs.myModalRef.show()
},
hideModal (val) {
console.log('hideModal triggered')
console.log(val)
this.$refs.myModalRef.hide()
}
}
}
</script>
<style>
</style>
Хорошо, это все еще ново для меня, админ, но я чувствую, что модал должен показываться здесь. Хотя, как я могу отправить событие click другому компоненту в vue?
Причина, по которой я хотел бы, чтобы это были разные компоненты, потому что в конечном итоге я хочу, чтобы этот файл SlideModal.vue обрабатывал разное содержимое для разных страниц, и хотел бы передать ему больше, чем просто свойство show.
Это вообще возможно сделать?