Vue.js / Bootstrap-用rowclick替换按钮功能

问题描述

我想在单击行时创建与单击行中的按钮相同的功能。当前在单击按钮时...该应用程序将我带到/ view并向我显示行数据。

当前问题：

在行上单击-可以查看，但不显示数据

Vue.js / Bootstrap：

<template>
  <!-- Row click goes to /view without key -->
  <b-table :fields="fields" :items="companies" @row-clicked="(view({}))" hover responsive="true"
           select-mode="single"
           selectable striped>
    <!-- Button click goes to /view/{key} -->
    <template v-slot:cell(key)="cell">
      <b-button @click.stop="view(cell.item)"></b-button>
    </template>
  </b-table>
</template>

我假设我需要将键解析为@ row-clicked事件？我怎么做？ vue.js的新手...谢谢。

@row-clicked="(view({}))"

后端部分

<script>
import firebase from '../Firebase'
import router from '../router'

export default {
  name: 'List',data() {
    return {
      fields: [
        {key: 'key',label: 'key'},{key: 'title',label: 'company',sortable: true},],companies: [],errors: [],ref: firebase.firestore().collection('companies'),}
  },created() {
    this.ref.onSnapshot((querySnapshot) => {
      this.companies = [];
      querySnapshot.forEach((doc) => {
        this.companies.push({
          key: doc.id,title: doc.data().title
        });
      });
    });
  },methods: {
    onRowSelected(items){
      this.companies = items
    },view(data) {
      router.push({name: 'View',params: {id: data.key}})
    }
  }
}
</script>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

bootstrap-vue javascript vue.js