Uncaught TypeError: _ctx. is not a function [VueJS 3] - vue.js

Question

I have problems when I put all my buttons inside one component and use click event to trigger the modals, I can put single button to single component and use event click with created custom components but I am questioning is there any way to put all buttons inside a components and that still works.
Buttons.vue
<template>
<button
class="btn btn-link btn-info btn-icon btn-sm"
data-toggle="modal" data-target="#userInfoModal"
#click="getUserInfo(user)">
<i class="icon-alert-circle-exc"></i>
</button>
<button
class="btn btn-link btn-warning btn-icon btn-sm"
data-toggle="modal" data-target="#userEditModal"
#click="getUserInfo(user)">
<i class="icon-pencil"></i>
</button>
<button
class="btn btn-link btn-danger btn-icon btn-sm"
data-toggle="modal" data-target="#userRemoveModal"
#click="getUserInfo(user)">
<i class="icon-simple-remove"></i>
</button>
</template>
usersManage.vue
<template>
<div class="col-md-12">
<div class="card">
<div class="card-header d-flex flex-row">
<h4 class="card-title align-self-center">Users Manager</h4>
<button class="btn btn-success btn-fab btn-icon btn-round mb-3 ml-2"
data-toggle="modal" data-target="#addUserModal">
<i class="icon-add"></i>
</button>
</div>
<div class="card-body">
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Email</th>
<th>Username</th>
<th class="text-right">Actions</th>
</tr>
</thead>
<tbody>
<tr v-for="(user, id) in users" :key="user.id">
<td>{{ user.id }}</td>
<td>{{ user.name }}</td>
<td>{{ user.email }}</td>
<td>{{ user.username }}</td>
<td class="text-right">
<!--- BUTTON COMPONENT HERE --->
<Buttons />
<!--- END BUTTON COMPONENT --->
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- MODALS -->
<!-- ADD USER MODAL -->
<div
class="modal modal-black fade" id="addUserModal"
tabindex="-1" role="dialog" aria-labelledby="addUserModal" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="addUserModal">Add new user</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
<i class="tim-icons icon-simple-remove"></i>
</button>
</div>
<form class="form-horizontal">
<div class="modal-body">
<div class="d-flex flex-row">
<label class="col-md-4 col-form-label">Name</label>
<div class="col-md-6">
<div class="form-group">
<input
type="name"
name="name"
class="form-control"
v-model="newUser.name"
/>
</div>
</div>
</div>
<div class="d-flex flex-row">
<label class="col-md-4 col-form-label">Username</label>
<div class="col-md-6">
<div class="form-group">
<input type="username" name="username" class="form-control"
v-model="newUser.username" />
</div>
</div>
</div>
<div class="d-flex flex-row">
<label class="col-md-4 col-form-label">Email</label>
<div class="col-md-6">
<div class="form-group">
<input type="email" name="email" class="form-control"
v-model="newUser.email" />
</div>
</div>
</div>
<div class="d-flex flex-row">
<label class="col-md-4 col-form-label">Password</label>
<div class="col-md-6">
<div class="form-group">
<input type="password" name="password" class="form-control"
v-model="newUser.password" />
</div>
</div>
</div>
<div class="d-flex flex-row">
<label class="col-md-4 col-form-label">Confirm Password</label>
<div class="col-md-6">
<div class="form-group">
<input type="password" name="confirmPassword" class="form-control"
v-model="newUser.confirmPassword" />
</div>
</div>
</div>
<div class="d-flex flex-row">
<label class="col-md-4 col-form-label">Roles</label>
<div class="col-md-6">
<div class="form-group">
<input type="roles" name="roles" class="form-control"
v-model="newUser.roles" />
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">
Cancel
</button>
<button type="submit" class="btn btn-primary" #click.stop.prevent="addUser()">
Create user
</button>
</div>
</form>
</div>
</div>
</div>
<!-- END ADD USER MODAL -->
<!-- USER's INFO MODAL -->
<div class="modal modal-black fade" id="userInfoModal"
tabindex="-1" role="dialog" aria-labelledby="userInfoModal" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="userInfoModal">
<strong class="text-primary">
{{ userInfo.username }} - {{ userInfo.name }}
</strong>'s Basic Information
</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
<i class="tim-icons icon-simple-remove"></i>
</button>
</div>
<div class="modal-body" id="userInfo">
<div class="row">
<div class="col-6">
<p>ID: {{ userInfo.id }}</p>
<p>Phone: {{ userInfo.phone }}</p>
<p>Username: {{ userInfo.username }}</p>
</div>
<div class="col-6">
<p>Name: {{ userInfo.name }}</p>
<p>Email: {{ userInfo.email }}</p>
</div>
</div>
</div>
<div class="modal-footer d-flex flex-row-reverse">
<button type="button" class="btn btn-secondary" data-dismiss="modal">
Close
</button>
</div>
</div>
</div>
</div>
<!-- END USER's INFO MODAL -->
<!-- EDIT USER MODAL -->
<div class="modal modal-black fade" id="userEditModal"
tabindex="-1" role="dialog" aria-labelledby="userEditModal" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="userEditModal">
Edit user
<strong class="text-primary">
{{ userInfo.name }} - {{ userInfo.username }}
</strong>
</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
<i class="tim-icons icon-simple-remove"></i>
</button>
</div>
<form class="form-horizontal" method="PUT">
<div class="modal-body">
<div class="d-flex flex-row">
<label class="col-md-3 col-form-label">Username</label>
<div class="col-md-9">
<div class="form-group">
<input type="text" class="form-control" name="username"
v-model="userInfo.username" />
</div>
</div>
</div>
<div class="d-flex flex-row">
<label class="col-md-3 col-form-label">Name</label>
<div class="col-md-9">
<div class="form-group">
<input type="text" class="form-control" name="username"
v-model="userInfo.name" />
</div>
</div>
</div>
<div class="d-flex flex-row">
<label class="col-md-3 col-form-label">Email</label>
<div class="col-md-9">
<div class="form-group">
<input type="email" name="email" class="form-control"
v-model="userInfo.email" />
</div>
</div>
</div>
<div class="d-flex flex-row">
<label class="col-md-3 col-form-label">Roles</label>
<div class="col-md-9">
<div class="form-group">
<input type="roles" name="roles" class="form-control"
v-model="userInfo.roles" />
</div>
</div>
</div>
</div>
<div class="modal-footer d-flex flex-row">
<button type="button" class="btn btn-secondary" data-dismiss="modal">
Close
</button>
<button type="submit" class="btn btn-primary" data-dismiss="modal"
#click="updateUser()">
Save Changes
</button>
</div>
</form>
</div>
</div>
</div>
<!-- END EDIT USER MODAL -->
<!-- REMOVE USER MODAL -->
<div class="modal modal-black fade" id="userRemoveModal"
tabindex="-1" role="dialog" aria-labelledby="userRemoveModal" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="userRemoveModal">
Confirm delete user
<strong class="text-primary">
{{ userInfo.username }} - {{ userInfo.name }}
</strong>?
</h4>
<button
type="button"
class="close"
data-dismiss="modal"
aria-hidden="true"
>
<i class="tim-icons icon-simple-remove"></i>
</button>
</div>
<div class="modal-body h4 text-white text-center mt-4">
Delete user
<strong class="text-danger">
{{ userInfo.username }} - {{ userInfo.name }}
</strong>
?
</div>
<div class="modal-footer d-flex flex-row">
<button type="button" class="btn btn-secondary" data-dismiss="modal">
Cancel
</button>
<button type="button" class="btn btn-danger" data-dismiss="modal"
#click="removeUser()">
Delete User
</button>
</div>
</div>
</div>
</div>
<!-- END REMOVE USER MODAL -->
<!-- END MODALS -->
</template>
<script>
import axios from "axios";
import InfoButton from ".../components/cores/Buttons.vue";
const API_URL = "http://localhost:8000/api";
export default {
name: "manageUsers",
components: { InfoButton },
data() {
return {
users: [],
newUser: {
name: null,
username: null,
email: null,
password: null,
confirmPassword: null,
roles: null,
},
userInfo: {
id: 0,
name: "",
username: "",
phone: "",
email: "",
password: "",
},
};
},
methods: {
refreshUsers() {
axios.get(`${API_URL}/users/allusers`).then((res) => {
this.users = res.data.data;
});
},
addUser() {
axios
.post(`${API_URL}/users/create`, this.newUser)
.then((res) => {})
.catch((error) => {
console.log("ERRRR:: ", error.response.data);
});
this.$router.push("/manager/users");
},
getUserInfo(user) {
axios
.get(`${API_URL}/users/show/` + user.id)
.then((res) => {
this.userInfo.id = res.data.data.id;
this.userInfo.name = res.data.data.name;
this.userInfo.email = res.data.data.email;
this.userInfo.username = res.data.data.username;
this.userInfo.phone = res.data.data.phone;
})
.catch((error) => {
console.log("ERRRR:: ", error.response.data);
});
},
updateUser() {
axios
.put(`${API_URL}/users/update/${this.userInfo.id}`, {
name: this.userInfo.name,
username: this.userInfo.username,
email: this.userInfo.email,
password: null,
roles: this.userInfo.roles,
})
.then((res) => {
this.refreshUsers();
})
.catch((error) => {
console.log("ERRRR:: ", error.response.data);
});
},
removeUser() {
axios
.delete(`${API_URL}/users/delete/${this.userInfo.id}`)
.then((res) => {
this.refreshUsers();
})
.catch((error) => {
console.log("ERRRR:: ", error.response.data);
});
},
},
mounted() {
this.refreshUsers();
},
};
</script>

Answer 1

I had the same problem and the solution was to send each button to a different function