如何在Vue.js中发送方法的选项卡

时间:2019-03-18 21:12:46

标签: vue.js tabs vue-component

我有文件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指令。拜托,我能以什么方式实现我的目标

0 个答案:

没有答案