时间戳

首页 > 解决方案 > 使用 btable 将事件传输到父组件

laravel - 使用 btable 将事件传输到父组件

问题描述

我正在使用 laravel（也许这对这个问题并不重要），带有 vue 和 bootstrap-vue。

我有一个模型Subnet，并且我创建了一个名为SubnetTablethats 的 vue 组件，它显示了一个表格，其中每个subnets. 在每一个中都显示了一个删除按钮，该按钮启动一个模式以确认删除子网（另一个名为 的自定义组件ModalDeleteSubnet）。

我试图向SubnetTable组件发出模态确认的结果，但它不起作用。我意识到这SubnetTable不是以下内容的父母ModalDeleteSubnet：

根 -> 子网表 -> BTable -> BTBody -> BTableCell -> ModalDeleteSubnet

所以，我想不可能以这种方式使发射工作......

使用 vue 创建像这样的东西（我认为很常见）的正确方法是什么：一个带有更新表数据的操作按钮的表？

希望我已经解释过了。对不起我的英语。

子网表

<template>
    <div>
        <b-card class="text-center">            
            <b-table small striped hover :items="data_subnets" :fields="fields" :tbody-tr-class="rowClass">
                <template slot="[ip_address]" slot-scope="data_subnets">
                    <b>{{ long2ip(data_subnets.item.ip_address) }}</b>
                </template>
              <template slot="[actions]" slot-scope="data_subnets">
                <b-button size="sm" :href="'subnets/'+ data_subnets.item.id">View</b-button>                  
                <modal_edit-subnet></modal_edit-subnet>
                <modal_delete-subnet :subnet="data_subnets.item"></modal_delete-subnet>
              </template>
            </b-table>
        </b-card>
    </div>
</template>
...
...
...

modal_delete-子网

<template>
  <div>
    <b-button size="sm" @click="showConfirmModal">Delete</b-button>  
  </div>
</template>

<script>
  export default {   
    name: 'Modal_DeleteSubnet',
    props: ['subnet'],
    data(){
      return {              
        data_subnet: this.subnet
      }
    },
    methods : {
      showConfirmModal() {   
        this.$bvModal.msgBoxConfirm('Please confirm that you want to delete the subnet...'
        , {
          title: long2ip(this.data_subnet.ip_address) + '/' + this.data_subnet.netmask,
          size: 'sm',
          buttonSize: 'sm',
          okVariant: 'danger',
          okTitle: 'Yes',
          cancelTitle: 'No',
          footerClass: 'p-2',
          hideHeaderClose: false,
          centered: true
        })
          .then(value => {
            if (value==true)
            {
              this.$emit('deleteSubnet', this.data_subnet.id)
            }
          })
          .catch(err => {
            // An error occurred
          })
      }
    }
  }
</script>

标签： laravelvue.jsbootstrap-vue

解决方案

只需将其传递给父母。

<modal_delete-subnet :subnet="data_subnets.item" @delete-subnet="$emit('delete-subnet', $event)"></modal_delete-subnet>

或者，如果您有删除处理程序SubnetTable，请在此处处理。

<modal_delete-subnet :subnet="data_subnets.item" @delete-subnet="deleteHandler"></modal_delete-subnet>

export default {
  ...
  methods: {
    deleteHandler(e) {
      console.log(e)
      // delete actions here
    },
  },
  ...
}

推荐阅读