I am currently exploring how to detect and update the changes made in a 'contenteditable' element within a specific row.
<tbody>
<!-- Iterate through the list and retrieve each data -->
<tr v-for="item in filteredList" :key="item">
<td v-for="field in fields" :key="field">
<p contenteditable="true" >{{ item[field] }}</p>
</td>
<button class="btn btn-info btn-lg" @click="UpdateRow(item)">Update</button>
<button class="btn btn-danger btn-lg" @click="DelteRow(item.id)">Delete</button>
</tr>
</tbody>
My goal is to reflect the changes made in the 'contenteditable' field in the respective row when calling the 'UpdateRow' function:
setup (props) {
const sort = ref(false)
const updatedList = ref([])
const searchQuery = ref('')
// a function to sort the table
const sortTable = (col) => {
sort.value = true
// Using _.sortBy() method
updatedList.value = sortBy(props.tableData, col)
}
const sortedList = computed(() => {
if (sort.value) {
return updatedList.value
} else {
return props.tableData
}
})
// Filter Search
const filteredList = computed(() => {
return sortedList.value.filter((product) => {
return (
product.recipient.toLowerCase().indexOf(searchQuery.value.toLowerCase()) != -1
)
})
})
const DeleteRow = (rowId) => {
console.log(rowId)
fetch(`${import.meta.env.VITE_APP_API_URL}/subscriptions/${rowId}`, {
method: 'DELETE'
})
.then((response) => {
// Error handling
if (!response.ok) {
throw new Error('Something went wrong')
} else {
// Display alert message
alert('Deletion successful')
console.log(response)
}
})
.then((result) => {
// Handling response
if (result === 'fail') {
throw new Error(result.message)
}
})
.catch((err) => {
alert(err)
})
}
const UpdateRow = (rowid) => {
fetch(`${import.meta.env.VITE_APP_API_URL}/subscriptions/${rowid.id}`, {
method: 'PUT',
body: JSON.stringify({
id: rowid.id,
date: rowid.date,
recipient: rowid.recipient,
invoice: rowid.invoice,
total_ex: Number(rowid.total_ex),
total_incl: Number(rowid.total_incl),
duration: rowid.duration
})
})
}
return { sortedList, sortTable, searchQuery, filteredList, DeleteRow, UpdateRow }
}
The commented lines of code work when manually entered:
// id: 331,
// date: rowid.date,
// recipient: 'new R',
// invoice: 'inv500',
// total_ex: Number(500),
// total_incl: Number(6000),
// duration: 'Monthly'
Each cell can be edited, but I am unsure how to capture the change event