0

I'm working on a Vue.js project where I use DataTables to display data. I have a column with a render method that includes a click function, but it doesn't seem to be working as expected. When I click the rendered element, nothing happens. Here's the relevant code snippet:

<script setup>
import DataTable from 'datatables.net-vue3';
import DataTablesCore from 'datatables.net';

DataTable.use(DataTablesCore);

const options = ref({
      columns: [
        {
          data: 'id', title: 'Action',
          render: (data) => {
            return  `
              <div class="flex items-center px-6 py-4 gap-3">
                <div class="cursor-pointer bg-green-600 p-1 rounded-md">
                  <svg class="w-[20px] h-[20px] fill-[#d1e5d4] " viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
                  <path d="M410.3 231l11.3-11.3-33.9-33.9-62.1-62.1L291.7 89.8l-11.3 11.3-22.6 22.6L58.6 322.9c-10.4 10.4-18 23.3-22.2 37.4L1 480.7c-2.5 8.4-.2 17.5 6.1 23.7s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L387.7 253.7 410.3 231zM160 399.4l-9.1 22.7c-4 3.1-8.5 5.4-13.3 6.9L59.4 452l23-78.1c1.4-4.9 3.8-9.4 6.9-13.3l22.7-9.1v32c0 8.8 7.2 16 16 16h32zM362.7 18.7L348.3 33.2 325.7 55.8 314.3 67.1l33.9 33.9 62.1 62.1 33.9 33.9 11.3-11.3 22.6-22.6 14.5-14.5c25-25 25-65.5 0-90.5L453.3 18.7c-25-25-65.5-25-90.5 0zm-47.4 168l-144 144c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6l144-144c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6z"></path>
                  </svg>
                </div>
                <div class="cursor-pointer bg-red-600 p-1 rounded-md" @click="handleDeleteClick(${data})">
                  <svg class="w-[20px] h-[20px] fill-[#d1e5d4]" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg">
                  <path d="M135.2 17.7C140.6 6.8 151.7 0 163.8 0H284.2c12.1 0 23.2 6.8 28.6 17.7L320 32h96c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 96 0 81.7 0 64S14.3 32 32 32h96l7.2-14.3zM32 128H416V448c0 35.3-28.7 64-64 64H96c-35.3 0-64-28.7-64-64V128zm96 64c-8.8 0-16 7.2-16 16V432c0 8.8 7.2 16 16 16s16-7.2 16-16V208c0-8.8-7.2-16-16-16zm96 0c-8.8 0-16 7.2-16 16V432c0 8.8 7.2 16 16 16s16-7.2 16-16V208c0-8.8-7.2-16-16-16zm96 0c-8.8 0-16 7.2-16 16V432c0 8.8 7.2 16 16 16s16-7.2 16-16V208c0-8.8-7.2-16-16-16z"></path>
                  </svg>  
                </div>
              </div>
            `
          }
        }
...// another columns
],
      data: [],
      searching: false,
      lengthMenu: [10, 15, 25],
      pageLength: 10,
    });
const handleDeleteClick = (id) => {
      console.log('Delete button clicked for ID:', id);
    };
</script>
Improve this question
4
  • DataTable's render function interprets the passed string as HTML, not as a Vue template. In HTML, @click doesn't have any meaning. Internally, Vue compiles it into a onclick handler. Currently your question lacks context and essential debugging details. It's not clear how you've implemented DataTables + Vue and what versions you are using for each. Provide a runnable minimal reproducible example if you need more help. Use codesandbox.io (or similar) if you need a node-like online environment. Commented Jan 15, 2024 at 10:37
  • You might find this example of dynamic rendering in DataTables with Vue3 useful. Relevant documentation here. Commented Jan 15, 2024 at 10:52
  • onMounted(() => { const edit = document.querySelector('#edit2'); // this id is test if(edit){ console.log('hlsdfd') edit.addEventListener('click', handleClick); } }) function handleClick() { console.log('Edit clicked!'); } Why I can't use like this? Commented Jan 15, 2024 at 19:05
  • my be you can read stackoverflow.com/questions/74163547/… Commented Jul 23, 2024 at 18:08
Related questions
0
Ajax Reload on Vue.js DataTables
42
Vue.js - Component is missing template or render function
1
jquery Link click in Datatables not working
Load 6 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.