我有文件Denuncias.vue
<template>
<div class="col-md-3" v-for="denuncia in listadenuncias" :key="denuncia.idDenuncia">
<button class="mr-1 btn btn-info text-white" v-b-tooltip.hover.top="'Ver Detalle'" v-on:click="infoDenuncia(denuncia.idDenuncia)">
<font-awesome-icon icon="info-circle" class="mr-1"/>
</button>
<div>
</template>
方法
methods: {
infoDenuncia(id){
axios
.get(this.ipApiRest + 'denuncia/api/v1/registro/' + id)
.then(response => {
let data = response.data;
let bodyDet = '';
bodyDet += '<div class="row">';
bodyDet += '<div class="col-md-4">';
bodyDet += 'Nro de ticket: ' + data.idDenuncia;
bodyDet += '</div>';
bodyDet += '<div class="col-md-4">';
bodyDet += 'Categoría: ' + data.categoria.nombre;
bodyDet += '</div>';
bodyDet += '<div class="col-md-4">';
bodyDet += 'Fecha: ' + data.fechaDenuncia;
bodyDet += '</div>';
bodyDet += '</div>';
bodyDet += '</div>';
bodyDet += '<h5 class="card-title">Evidencias</h5>';
bodyDet += '<hr />';
bodyDet += '<b-tabs card>';
bodyDet += '<b-tab title="Fotos" active>';
bodyDet += '<p>It was popularised in the</p>';
bodyDet += '</b-tab>';
bodyDet += '<b-tab title="Videos">';
bodyDet += '<p>It was popularised in the</p>';
bodyDet += '</b-tab>';
bodyDet += '<b-tab title="Audios">';
bodyDet += '<p>It was popularised in the</p>';
bodyDet += '</b-tab>';
bodyDet += '</b-tabs>';
let obj={
title:'Detalle de la Denuncia',
body:bodyDet
}
this.$root.$emit('eventing', obj)
this.$root.$emit('bv::show::modal','modalCustom')
})
}
}
我在BaseLayout.vue中收到了它
<ModalCustom :titleModal="titleModal" :bodyModal="bodyModal" />
mounted() {
this.$root.$on('eventing', data => {
this.titleModal =data.title
this.bodyModal =data.body
});
}
最后
<template lang="html">
<b-modal id="modalCustom" ref="modalCustom" size="xl" :title="titleModal">
<div v-html="bodyModal">
</div>
</b-modal>
</template>
我是vuejs的新手,我想在要发送的html中建立一个选项卡,但是我意识到,当我到达ModalsCustom.vue时,我没有解释vuejs指令。拜托,我能以什么方式实现我的目标