Vue中点击按钮如何展示所有选中的工人信息？

我是Vue新手，正在开发具备多选功能的DataTable表格组件，需求是点击「Add to List」按钮后展示所有选中工人的详细信息。目前已实现多选逻辑，但点击按钮时通过alert(this.selectedWorkers)仅返回[object Object]，说明选中功能正常，但无法正确渲染工人的具体数据。

相关代码 #

模板代码 #

<DataTable 
  :style="{opacity: working ? 0.3 : 1}"
  responsiveLayout="scroll"
  dataKey="id"
  filterDisplay="menu"
  showGridlines
  editMode="row"
  v-model:selection="selectedWorkers" 
  removableSort
  v-model:filters="filters"
  :value="workers"
  :globalFilterFields="filterFields"
  :paginator="true"
  :rows="8">

  <template #header>
      <div class="row">
        <div class="col-5">
          <input class="form-control" v-model="filters.global.value" placeholder="Keyword Search" />
        </div>
        <div class="col-3">
          <button 
            type="button" 
            class="btn"
            :class="filters.global.value ? 'btn-secondary' : 'btn-outline-secondary'"
            :disabled="!filters.global.value" 
            @click="clearFilter">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-funnel" viewBox="0 0 16 16">
            <path d="M1.5 1.5A.5.5 0 0 1 2 1h12a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.128.334L10 8.692V13.5a.5.5 0 0 1-.342.474l-3 1A.5.5 0 0 1 6 14.5V8.692L1.628 3.834A.5.5 0 0 1 1.5 3.5v-2zm1 .5v1.308l4.372 4.858A.5.5 0 0 1 7 8.5v5.306l2-.666V8.5a.5.5 0 0 1 .128-.334L13.5 3.308V2h-11z"/>
            </svg>
            <i class="bi bi-funnel"></i> 
            Clear
          </button>
        </div>
        <div class="col-3">
          <button 
            type="button" 
            class="btn"
            severity="info"
            :disabled="!selectedWorkers || !selectedWorkers.length"
            @click="addToList(data)">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus-square" viewBox="0 0 16 16">
              <path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/>
              <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/>
            </svg>
            Add to List
          </button>
        </div>
      </div>
  </template>

  <Column selectionMode="multiple" headerStyle="width: 3rem"></Column>
</DataTable>

JS代码 #

data() {
  return {
    selectedWorkers: null,
  };
},

methods: {
  addToList() {
    alert(this.selectedWorkers)
  },
}

当前效果 #

• 表格效果：
• 提示信息：

1. 正确展示对象数组内容 #

alert()只能显示字符串，直接传入对象数组会被默认转为[object Object]。要查看具体数据，有两种方式：

• 用JSON.stringify()转成可读字符串：

  addToList() {
    alert(JSON.stringify(this.selectedWorkers, null, 2))
  }
  

• 用console.log()在浏览器控制台查看（更适合调试）：

  addToList() {
    console.log('选中的工人数据:', this.selectedWorkers)
  }
  

2. 初始化选中数组为正确类型 #

DataTable的多选绑定需要数组类型，把selectedWorkers初始化为空数组，避免潜在的空值问题：

data() {
  return {
    selectedWorkers: [],
  };
}

3. 修正按钮点击事件参数 #

按钮的@click="addToList(data)"中data是多余的，方法也没有接收该参数，直接去掉：

<button 
  type="button" 
  class="btn"
  severity="info"
  :disabled="!selectedWorkers || !selectedWorkers.length"
  @click="addToList">

4. 在页面渲染选中信息（可选） #

如果需要在页面直观展示选中工人的详细信息，可在模板中添加展示区域：

<!-- 在DataTable下方添加 -->
<div v-if="selectedWorkers.length > 0" class="mt-4">
  <h3>选中的工人信息</h3>
  <div class="card">
    <div class="card-body">
      <ul class="list-group">
        <li v-for="worker in selectedWorkers" :key="worker.id" class="list-group-item">
          <p><strong>ID:</strong> {{ worker.id }}</p>
          <p><strong>姓名:</strong> {{ worker.name }}</p>
          <!-- 根据你的worker数据结构添加其他字段 -->
        </li>
      </ul>
    </div>
  </div>
</div>

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