Search code examples
arraysvue.jsonclickevent-handlingalert

How to display all selected users on click in vue

I`m trying to make a table in vue. Where the user can select different workers and have their information displayed on the screen. I am very new to vue so don't really know how to do this. What I currently have can be seen below any help would be greatly appreciated.

Code for my button :

    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>

Js Code :

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

    methods: {

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

The current code returns [object Object] for each selected worker. Therefore that means that the selection part is working just cant get the data to display.

Current table to give you and idea

enter image description here

Message currently displayed

enter image description here

Solution

  • To display the right format you probably want to map over selectedWorkers to select the keys you want (id and name), using string template syntax. Then use join to combine the result

    alert(this.selectedWorkers.map(worker=>`${worker.id}-${worker.name}`).join())

    Example of assumed format: 

    const selectedWorkers = [{
  id: 'AA',
  name: 'Lou Poole'
},{
  id: 'BB',
  name: 'Jonathan Fuller'
}]

alert(selectedWorkers.map(worker => `${worker.id}-${worker.name}`).join())