Parameter passed to function when clicking on selected row in b-table is array instead of object

When clicking on selected row in b-table and calling a function with prop @row-selected, parameter passed to function that is being called is array with one object in it, instead of just object (row data). Please note that select-mode prop is “single”.

HTML:

<b-table
selectable
select-mode="single"
@row-selected="openRow"
:items="items"
>
</b-table>

Vue:

data: {
    items: [
        { age: 40, first_name: 'Dickerson', last_name: 'Macdonald' },
        { age: 21, first_name: 'Larsen', last_name: 'Shaw' }
    ]
},
methods: {
     openRow(item) {
           console.log(item); /* 1st example */
           console.log(item.age); /* 2nd example */ 
           console.log(item[0].age); /* 3rd example */
    }
}

Now when clicked on row, console log will show [{…}] which is array with one object in it (1st example). When I want to access some property of that object (2nd example), console log will show “undefined” obviously. Only way to get it working is to specify index of that object position in that array (3rd example).

However when using in production Vue returns following warning:

app.js:77307 [Vue warn]: Error in v-on handler: “TypeError: Cannot read property ‘id’ of undefined”

found in

---> <BTable>
       <Students> at resources/js/components/Students.vue
         <App> at resources/js/components/App.vue
           <Root>
warn @ app.js:77307
logError @ app.js:78566
globalHandleError @ app.js:78561
handleError @ app.js:78521
invokeWithErrorHandling @ app.js:78544
invoker @ app.js:78861
invokeWithErrorHandling @ app.js:78536
Vue.$emit @ app.js:80556
Vue.<computed> @ backend.js:1781
selectedRows @ app.js:18205
run @ app.js:81234
flushSchedulerQueue @ app.js:80978
(anonymous) @ app.js:78662
flushCallbacks @ app.js:78588
Promise.then (async)
timerFunc @ app.js:78615
nextTick @ app.js:78672
queueWatcher @ app.js:81070
update @ app.js:81210
notify @ app.js:77418
reactiveSetter @ app.js:77743
proxySetter @ app.js:81297
selectionHandler @ app.js:18288
invokeWithErrorHandling @ app.js:78536
Vue.$emit @ app.js:80556
Vue.<computed> @ backend.js:1781
rowClicked @ app.js:18914
handlers.click @ app.js:19055
invokeWithErrorHandling @ app.js:78536
invoker @ app.js:78861
original._wrapper @ app.js:84214
app.js:78570 TypeError: Cannot read property 'id' of undefined
    at Store.openStudent (app.js:91585)
    at Array.wrappedActionHandler (app.js:89382)
    at Store.dispatch (app.js:89087)
    at Store.boundDispatch [as dispatch] (app.js:88981)
    at VueComponent.mappedAction (app.js:89585)
    at invokeWithErrorHandling (app.js:78536)
    at VueComponent.invoker (app.js:78861)
    at invokeWithErrorHandling (app.js:78536)
    at VueComponent.Vue.$emit (app.js:80556)
    at VueComponent.Vue.<computed> [as $emit] (backend.js:1781)

Now there are workarounds such as looping through that array first since we know there is only going to be one object in it and then accessing property of that object, but I don’t think that it is the way it should work.

Here is a fiddle (please note that in fiddle, Vue won’t throw that warning from 3rd example): https://jsfiddle.net/p3dxa1nh/7/

Please let me know if it is really a bug, or I am doing something wrong here.

[tmorehouse]

What function is accessing property id in your code?

Note when a row is unslected, it will be passed an empty array, signifying that no rows are selected. If you are blindly trying to access selectedRows[0].id without first testing to see if selectedRows[0] is defined/truthy (or selectedRows.length > 0), then you will see an error when trying to access id

[tmorehouse]

Just remember that row-selected is also emitted when rows are no longer selected (emitted with an empty array). It will be emitted with an empty array when pagination or sorting or filtering are applied as well (and rows had been previously selected)