VueJS折叠面板新增项标题显示为object MouseEvent问题求助

实现了点击表格内“+”按钮新增折叠面板的功能，期望新增面板的标题显示对应数据行的名称（例如“Windows 1”），但点击添加后，新增折叠面板的标题却显示为“object MouseEvent”。

相关组件代码 #

CollapseSection.vue #

<template>
  <div class="accordion" role="tablist">
    <b-button block v-b-toggle.accordion-1 class="collapse-btn" align-h="between">
      {{ selectText }}
      <b-icon :icon="visible ? 'caret-down' : 'caret-up'" class="icon"></b-icon>
    </b-button>
    <b-card no-body class="mb-1">
      <b-collapse id="accordion-1" v-model="visible" accordion="my-accordion" role="tabpanel">
        <SearchField></SearchField>
        <b-card-body>
          <slot name="content" :addItem="addItem"></slot>
        </b-card-body>
      </b-collapse>
    </b-card>

    <div v-for="(item, index) in items" :key="index">
      <b-button block v-b-toggle="'accordion-' + (index + 2)" class="collapse-btn">
        {{ item.name }}
        <b-icon :icon="visible ? 'caret-down' : 'caret-up'" class="icon"></b-icon>
      </b-button>
      <b-card no-body class="mb-1">
        <b-collapse :id="'accordion-' + (index + 2)" accordion="my-accordion" role="tabpanel">
          <b-card-body>
            <slot name="createdContent"></slot>
          </b-card-body>
        </b-collapse>
      </b-card>
    </div>
  </div>
</template>

<script>
import SearchField from "@/components/UI/SearchField.vue";
export default {
  name: "CollapseButton",
  components: {SearchField},
  props: {
    selectText: {
      type: String,
      default: () => "Select",
    },
  },
  data() {
    return {
      isConfiguring: false,
      configuringItem: null,
      items: [],
      visible: false,
    }
  },
  methods: {
    addItem(name) {
      const item = { name };
      this.items.push(item);
      this.isConfiguring = true;
      this.configuringItem = item;
      this.$emit('item-added', item);
    }
  },
}
</script>

DataTable.vue #

<template>
<tbody>
<tr v-for="(item, itemIndex) in data" :key="itemIndex">
  <td>
      <slot></slot>
  </td>
  <td v-for="(label, labelIndex) in labels" :key="labelIndex">
    {{ item[label.field] }}
  </td>
</tr>
</tbody>
</template>
<script>
export default {
  name: "DataTable",
  components: {ActionColumn},
  props: {
    labels: {
      type: Array,
      required: true,
    },
    data: {
      type: Array,
      required: true,
    },
  },
  methods: {
    addItem(name) {
      this.$emit('add-item', name);
    }
  }
}
</script>

NewLab.vue #

<CollapseSection select-text="Select Images">
    <template #content="{ addItem }">
      <DataTable :labels="labels" :data="data" :showAdd="true">
        <b-icon icon="plus" class="add-btn" @click="addItem(data.name)">
        </b-icon>
      </DataTable>
    </template>
    <template #createdContent>
      <CollapseTabContent>

      </CollapseTabContent>
    </template>
</CollapseSection>
<script>
const labels = [
  {text: "Name", field: 'name'},
  {text: "Description", field: 'description'},
]
const data = [
  {name: 'Windows 1', description: 'Password Cracking'},
  {name: 'Windows 13', description: 'SIEM and MISP machine'},
  {name: 'Windows 15', description: 'AD auditing lab'},
  {name: 'Windows 31', description: 'Threat Hunting and Investigation'},
];

export default {
  name: "NewLab",
  components: {DataTable, CollapseSection},
  data() {
    return {
      labels: labels,
      data: data,
    };
  },
</script>

问题原因 #

1. 参数传递错误：在NewLab.vue中，@click="addItem(data.name)"里的data是数组，不存在name属性，实际传递的是undefined；同时Vue的点击事件默认会传递鼠标事件对象，当方法参数未正确传入时，addItem接收到的是MouseEvent对象，导致标题显示object MouseEvent。
2. 未传递行数据：DataTable组件的slot没有把当前行的item数据传递给父组件，导致父组件无法获取点击行的具体名称。

修复方案 #

1. 修改DataTable.vue，传递当前行数据到slot #

将slot改为传递当前行的item，让父组件能拿到对应行的数据：

<template>
<tbody>
<tr v-for="(item, itemIndex) in data" :key="itemIndex">
  <td>
      <slot :item="item"></slot> <!-- 传递当前行item到slot -->
  </td>
  <td v-for="(label, labelIndex) in labels" :key="labelIndex">
    {{ item[label.field] }}
  </td>
</tr>
</tbody>
</template>
<script>
export default {
  name: "DataTable",
  props: {
    labels: {
      type: Array,
      required: true,
    },
    data: {
      type: Array,
      required: true,
    },
  }
}
</script>

（注：原代码中components: {ActionColumn}未实际使用，可移除）

2. 修改NewLab.vue，接收行数据并传递正确名称 #

在slot中接收DataTable传递的item，点击时传入当前行的name：

<CollapseSection select-text="Select Images">
    <template #content="{ addItem }">
      <DataTable :labels="labels" :data="data">
        <template #default="{ item }"> <!-- 接收当前行item -->
          <b-icon icon="plus" class="add-btn" @click="addItem(item.name)"></b-icon>
        </template>
      </DataTable>
    </template>
    <template #createdContent>
      <CollapseTabContent></CollapseTabContent>
    </template>
</CollapseSection>

验证 #

修改完成后，点击表格每行的“+”按钮，新增折叠面板的标题会正确显示对应行的名称（如“Windows 1”）。

内容的提问来源于stack exchange，提问作者Temka