Develop Reference

Call a function with customized datatable in Vuejs

I just started with Vuejs (Composition API) and trying to create my own kind of "datatable".
Managed to create the columns and the rows and all is great (event the call via ajax).
But now I have some kind of problem which I cant figure out how to fix.
I'm calling the Datatable component like this:
<DataTable :config="{
data: {
type: 'remote',
url: '/api/categories/get'
},
columns: [
{
field: 'id',
title: '#'
},
{
field: 'name',
title: 'Name'
},
{
field: 'order',
title: 'Placement'
},
{
field: 'actions',
title: 'Actions',
template: 'SOME HTML & CALL FUNCTION'
}
]
}" />
as you can see in the last column there is a new key called 'template'.
the point is to create an "html" value, like buttons and stuff like that.
On the Datatable component I'm checking to see if there is "template" key, and if it's exists I want to display it
I did something like that:
<template v-if="column.template">{{ HTML }}</template>
I managed to show the buttons/everything else. the problem that I cant make the button to call any function.
Let's say I want to add delete button, something like that:
field: "actions",
title: "Actions",
template: () => "<button #click="delete(id)" >delete</button>"
How can I make it work?
if I'm not using it's correctly, would love to hear & learn how to do it right.
Thanks in advance

You can use scoped slots to render some templates that also have access to the state of the child component.
So you would define a slot in your table that have the name of the column <slot v-bind="item" :name="column.name" /> and the v-bind="item" would allow you to access the row data in the slot definition in the parent.
<template>
<table>
<thead>
<tr>
<th v-for="column in columns">{{column.title}}</th>
</tr>
</thead>
<tbody>
<tr v-for="item in items">
<td v-for="column in columns">
<template v-if="column.name">{{item[column.name]}}</template>
<slot v-bind="item" :name="column.name"></slot>
</td>
</tr>
</tbody>
</table>
</template>
<script setup lang="ts">
defineProps<{
items: any[],
columns : {title? : string, name? : string}[]
}>()
</script>
<style>
th {
font-weight: bold;
}
</style>
And then use it like this
<script setup lang="ts">
import { ref } from 'vue';
import MyTable from './components/MyTable.vue';
const items = ref([{msg : 'Hello' }, { msg: 'World' }]);
</script>
<template>
<main>
<MyTable :items="items" :columns="[{ title : 'Message', name: 'msg' }, { name: 'delete'}]">
<template #delete="item">
<button #click="items.splice(items.findIndex(x => x.msg === item.msg), 1)">Delete</button>
</template>
</MyTable>
</main>
</template>

How can I get only the field from a vuetify table to post in axios

How can I get only the field from a vuetify table to post by in axios, I have a table as I show in the following code
<div id="app">
<v-app id="inspire">
<v-card>
<v-card-title>
<v-text-field
v-model="search"
append-icon="mdi-magnify"
label="Search"
single-line
hide-details
></v-text-field>
</v-card-title>
<v-data-table
:headers="headers"
:items="students"
:search="search"
>
<template v-slot:item.status="{ item }">
<v-btn v-if="item.status" #click="add(item)">Add</v-btn>
<v-btn v-else disabled>Temporarily no access</v-btn>
</template>
</v-data-table>
</v-card>
</v-app>
</div>
and from script I have the following code
const app = new Vue({
el: '#app',
vuetify: new Vuetify(),
data() {
return {
search: '',
headers: [
{ text: 'Number list', align: 'start', value: 'id'},
{ text: 'Name', align: 'start', value: 'name'},
{ text: 'Options', value: 'status' }
],
students: [
{
id: 1,
name: pedro,
status: activo,
},
{
id: 2,
name: juan,
status: activo,
},
{
id: 3,
name: jose,
status: activo,
},
]
};
},
methods: {
add (item) {
axios.post('http://localhost/list?id=' + item.id)
.then(response => {
this.response = response
}).catch(e => {
console.log(e)
});
},
}
});
What I want to do is that when it is clicked I only sent the id per post with axios but when I click it I get an error in the console that says that item is undefined that is my main error, and as you can see I need it to be first verify that the student's status is active. Below I also add an image of the generated table for further reference.
table reference
Edit
i forgot put
#click="add(item)"
but still doesn´t work, no longer even an error appears in the console even if it has the catch

Try:
<v-btn v-if="item.estado" #click="add(item)">Add</v-btn>
Try 2:
Check first if item is coming through correctly by adding the following line. Maybe this will help in tracking down the problem
<template v-slot:item.status="{ item }">
<p>Debug item text: {{item}}</p>
<v-btn v-if="item.status" #click="add(item)">Add</v-btn>
<v-btn v-else disabled>Temporarily no access</v-btn>
</template>

Headers in rows in using vuetify

I am using vuetify 1.0. I am using v-data-table component to display data. But the issue I am facing here is I am not able to figure out how can I display headers in row. Something like this as below.
Name: XYZ
Location: PQR
Number: 000-000-0000
But right now the table looks something like this:
Name Location Number
XYZ
PQR
000-000-0000
In the code below, the manager_array consists of a single object.
<template>
<v-card>
<v-card>
<v-container fluid>
<v-data-table
:headers="headers"
:items="manager_array"
hide-actions
:disable-initial-sort="true">
<template slot="items" slot-scope="props">
<tr>{{ props.item.first_name }}</tr>
<tr>{{ props.item.location }}</tr>
<tr>{{ props.item.number }}</tr>
</template>
</v-data-table>
</v-container>
</v-card>
</v-card>
</template>
<script>
export default {
props: ['manager'],
data () {
return {
manager_array: [],
headers: [
{ text: 'Name', value: 'name'},
{ text: 'Location', value: 'location'},
{ text: 'Number', value: 'number'},
]
}
},
created() {
this.manager_array.push(this.manager)
},
};
</script>

I can't display properly v-data-table data: ''Invalid prop: type check failed for prop "items". Expected Array, got Object''

I'm starting a project in which I had to use Vue. I'm actually really new to this, so I'm learning on the go. I do apologize in advance since this question have answered before, however, I didn't really understand the solutions provided, which is why I'm here asking myself.
Well, I was trying to display some data on my Data Table (more specifically, v-data-table from Vuetify). I was able to get the data from the API, but, for some reason it doesn't show me anything. Thanks to Vuex I can see that the mutation worked because on the console on Google Chrome I can see the Array of objects. But as I said, it still does't show me a single thing on the table, it even says 'no data available'. Some errors that I get are things like '[Vue warn]: Invalid prop: type check failed for prop "items". Expected Array, got Object' and 'TypeError: this.items.slice is not a function'.
Here is the code from List.vue
<template>
<v-container id="data-tables" tag="section">
<div class="text-right">
<v-btn class="mx-2" fab dark color="primary" :to="{ name: 'UserCreate' }">
<v-icon dark>mdi-plus</v-icon>
</v-btn>
</div>
<base-material-card
color="indigo"
icon="mdi-vuetify"
inline
class="px-5 py-3"
>
<template v-slot:after-heading>
<div class="display-2 font-weight-light">
Lista de Empleados
</div>
</template>
<v-text-field
v-model="search"
append-icon="mdi-magnify"
class="ml-auto"
label="Search"
hide-details
single-line
style="max-width: 250px;"
/>
<v-divider class="mt-3" />
<v-data-table
:headers="headers"
:items="users"
:search.sync="search"
:sort-by="['name', 'office']"
:sort-desc="[false, true]"
multi-sort
>
<template v-slot:item.actions="{ item }">
<v-icon small class="mr-2" #click="editItem(item)">
mdi-eye
</v-icon>
<v-icon
small
class="mr-2"
#click="editItem(item)"
:to="{ name: 'UserUpdate' }"
>
mdi-pencil
</v-icon>
<v-icon small #click="deleteItem(item)">
mdi-delete
</v-icon>
</template>
</v-data-table>
</base-material-card>
</v-container>
</template>
<script>
import { mapState } from 'vuex'
export default {
name: 'UsersTable',
data() {
return {
headers: [
{
text: 'Nombre',
value: 'empleado.nombre',
},
{
text: 'Apellido',
value: 'empleado.apellido',
},
{
text: 'Dirección',
value: 'empleado.direccion',
},
{
text: 'Correo Electrónico',
value: 'email',
},
{
text: 'Teléfono',
value: 'empleado.telefono',
},
{
sortable: false,
text: 'Actions',
value: 'actions',
},
],
loader: true,
search: undefined,
}
},
created() {
this.$store.dispatch('users/fetchUsers')
},
computed: {
...mapState(['users']),
},
methods: {},
mounted() {},
}
</script>
And the code from user.js, where the fetchUsers it's coming from.
import auth from '#/api/auth'
export const namespaced = true
export const state = {
users: [],
}
export const mutations = {
SET_USERS(state, users) {
state.users = users
},
}
export const actions = {
fetchUsers({ commit, dispatch }) {
auth
.getAllAccounts()
.then((response) => {
commit('SET_USERS', response.data)
})
.catch((error) => {
const notification = {
type: 'error',
message: 'There was a problem fetching users: ' + error.message,
}
dispatch('notification/add', notification, { root: true })
})
},
}
Thanks in advance.

You are not getting the correct user from vuex, because is namespaced, change to:
computed: {
...mapState('users',['users']),
},

MapState helper dosen't work the same way like the other helpers because the state module isn't registred in the global namespace. So namespacing your module will help or you do it in this way:
computed: {
...mapState({
users: state => state.FilenameOfYourModule.users
})
}

Vue.js Data not Displaying in view i am trying to display todo list which just displaying blank

This is my App.vue where i have created the Data for todo list and trying to display all todo array data but nothing is showing i am stuck there and please help me to solve that problem
<template>
<div id="app">
<ToDo/>
</div>
</template>
<script>
import ToDo from './components/ToDo';
export default {
name: 'app',
components: {
ToDo
},
data ()
{
return {
todos: [
{
id: 1,
title: "TODO 1",
completed: false
},
{
id: 2,
title: "TODO 2",
completed: true
},
{
id: 3,
title:" TODO 3",
completed: false
}
]
}
}
}
</script>
This is my ToDo.vue from there i am trying to pass the todo.title to Display the title but not working
<template>
<div>
<div v-bind:key="todo.id" v-for="todo in todos" >
{{todo.title}}
</div>
</div>
</template>
<script>
export default {
name:"ToDo",
props: ["todos"]
}
</script>

You should be getting a warning in your console.
You are using a properties but not actually send it to the component.
Your template should be like this.
<template>
<div id="app">
<ToDo :todos="todos"/>
</div>
</template>
Since you're "todos" is an object you need to send it as Javascript which is the meaning of the : before the attribute.
Moreover you should definitely ensure that you are sending an Object to your component by specifying it in the definitions of your props.
props: {
todos: Object
}

you need to pass the todos into ToDo component from the app component like
<template>
<div id="app">
<ToDo :todos=todos/>
</div>
</template>