how can I use the api with vue3 to add child row

jjbcode

Hello I am new to using datatables and I cannot figure out how to use the api with vue3. I am trying to add a child row but I am not having any success. Are there any examples out there?

allan

Hi,

This part of the manual covers how to use the DataTables API in a Vue application. The docs also link to this example which shows it in action.

Allan

jjbcode

Thank you Allan, I looked at that part of the manual a bunch of times and for some reason I was confused. I will give it another try today. Thanks again.

jjbcode

This is what I tried for adding a child table on page load. I am new to this so maybe I am missing something very simple
```
onMounted(function () {
dt = table.value.dt()
dt.table.rows().every( function () {
this.child(
$(
'<tr>'+
'<td>'+"Hello"+'.1</td>'+
'<td>'+"Hello"+'.2</td>'+
'<td>'+"Hello"+'.3</td>'+
'<td>'+"Hello"+'.4</td>'+
'</tr>'
)
)
.show();
} );

} );

kthorngren

You might be getting an error like this in the browser's console:

Uncaught TypeError: dt.table.rows is not a function

I think you will need to remove table from dt.table.rows(). Like this example:
https://live.datatables.net/rivokaxa/1/edit

Kevin

jjbcode

kthorngren thank you for your reply. I was getting that error and I made the change you mentioned. now I get this error with the "this" keyword
``` 'this' implicitly has type 'any' because it does not have a type annotation.

not sure why I am having so much trouble with this