How to collect selected row data from v-data-table in vuetify #20037
-
|
Hi I have a question about how to collect selected row data from v-data-table in vuetify. My sample code is belowed. I have tried many ways but got unsuccessful result. Please assist me in solving this problem. Thanks.
Show Selected
<script>
import { ref } from 'vue'
export default {
setup() {
const headers = [
{ text: 'Name', value: 'name' },
{ text: 'Address', value: 'address' },
{ text: 'Customer Name', value: 'cust_name' },
]
const items = [
{ name: '001', address: '123 Main St', cust_name: 'John Doe' },
{ name: '002', address: '456 Elm St', cust_name: 'Jane Smith' },
]
const selected = ref([])
const showSelected = () => {
if (selected.value.length === 0) {
alert('No rows selected')
return
}
let output = 'Selected Items:\n'
selected.value.forEach(item => {
output += `Key: ${item.name}, Address: ${item.address}, Customer Name: ${item.cust_name}\n`
})
alert(output)
}
return {
headers,
items,
selected,
showSelected,
}
},
}
</script>
<style>
</style>
|
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 1 reply
-
|
You can use v-model with a ref array and return-object attr, check https://vuetifyjs.com/en/components/data-tables/data-and-display/#item-value search selected values |
Beta Was this translation helpful? Give feedback.
-
|
hi userquin Really appreciate your reply, adjust my code, it works. |
Beta Was this translation helpful? Give feedback.
You can use v-model with a ref array and return-object attr, check https://vuetifyjs.com/en/components/data-tables/data-and-display/#item-value search selected values