Блог

У меня возникают проблемы, когда я помещаю все свои кнопки внутри одного компонента и использую событие click для запуска модалов, я могу поместить одну кнопку в один компонент и использовать событие click с созданными пользовательскими компонентами, но я задаюсь вопросом, есть ли способ поместить все кнопки внутри компонентов, и это все еще работает.

Кнопки.vue

 lt;templategt;  lt;button  class="btn btn-link btn-info btn-icon btn-sm"  data-toggle="modal" data-target="#userInfoModal"  @click="getUserInfo(user)"gt;  lt;i class="icon-alert-circle-exc"gt;lt;/igt;  lt;/buttongt;    lt;button  class="btn btn-link btn-warning btn-icon btn-sm"  data-toggle="modal" data-target="#userEditModal"  @click="getUserInfo(user)"gt;  lt;i class="icon-pencil"gt;lt;/igt;  lt;/buttongt;    lt;button  class="btn btn-link btn-danger btn-icon btn-sm"  data-toggle="modal" data-target="#userRemoveModal"  @click="getUserInfo(user)"gt;  lt;i class="icon-simple-remove"gt;lt;/igt;  lt;/buttongt; lt;/templategt;  

Управление пользователями.vue

 lt;templategt;  lt;div class="col-md-12"gt;  lt;div class="card"gt;  lt;div class="card-header d-flex flex-row"gt;  lt;h4 class="card-title align-self-center"gt;Users Managerlt;/h4gt;  lt;button class="btn btn-success btn-fab btn-icon btn-round mb-3 ml-2"  data-toggle="modal" data-target="#addUserModal"gt;  lt;i class="icon-add"gt;lt;/igt;  lt;/buttongt;  lt;/divgt;  lt;div class="card-body"gt;  lt;table class="table table-striped"gt;  lt;theadgt;  lt;trgt;  lt;thgt;#lt;/thgt;  lt;thgt;Namelt;/thgt;  lt;thgt;Emaillt;/thgt;  lt;thgt;Usernamelt;/thgt;  lt;th class="text-right"gt;Actionslt;/thgt;  lt;/trgt;  lt;/theadgt;  lt;tbodygt;  lt;tr v-for="(user, id) in users" :key="user.id"gt;  lt;tdgt;{{ user.id }}lt;/tdgt;  lt;tdgt;{{ user.name }}lt;/tdgt;  lt;tdgt;{{ user.email }}lt;/tdgt;  lt;tdgt;{{ user.username }}lt;/tdgt;  lt;td class="text-right"gt;   lt;!--- BUTTON COMPONENT HERE ---gt;  lt;Buttons /gt;  lt;!--- END BUTTON COMPONENT ---gt;   lt;/tdgt;  lt;/trgt;  lt;/tbodygt;  lt;/tablegt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;!-- MODALS --gt;  lt;!-- ADD USER MODAL --gt;  lt;div  class="modal modal-black fade" id="addUserModal"  tabindex="-1" role="dialog" aria-labelledby="addUserModal" aria-hidden="true"gt;  lt;div class="modal-dialog modal-lg" role="document"gt;  lt;div class="modal-content"gt;  lt;div class="modal-header"gt;  lt;h4 class="modal-title" id="addUserModal"gt;Add new userlt;/h4gt;  lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"gt;  lt;i class="tim-icons icon-simple-remove"gt;lt;/igt;  lt;/buttongt;  lt;/divgt;  lt;form class="form-horizontal"gt;  lt;div class="modal-body"gt;  lt;div class="d-flex flex-row"gt;  lt;label class="col-md-4 col-form-label"gt;Namelt;/labelgt;  lt;div class="col-md-6"gt;  lt;div class="form-group"gt;  lt;input  type="name"  name="name"  class="form-control"  v-model="newUser.name"  /gt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;div class="d-flex flex-row"gt;  lt;label class="col-md-4 col-form-label"gt;Usernamelt;/labelgt;  lt;div class="col-md-6"gt;  lt;div class="form-group"gt;  lt;input type="username" name="username" class="form-control"  v-model="newUser.username" /gt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;div class="d-flex flex-row"gt;  lt;label class="col-md-4 col-form-label"gt;Emaillt;/labelgt;  lt;div class="col-md-6"gt;  lt;div class="form-group"gt;  lt;input type="email" name="email" class="form-control"  v-model="newUser.email" /gt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;div class="d-flex flex-row"gt;  lt;label class="col-md-4 col-form-label"gt;Passwordlt;/labelgt;  lt;div class="col-md-6"gt;  lt;div class="form-group"gt;  lt;input type="password" name="password" class="form-control"  v-model="newUser.password" /gt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;div class="d-flex flex-row"gt;  lt;label class="col-md-4 col-form-label"gt;Confirm Passwordlt;/labelgt;  lt;div class="col-md-6"gt;  lt;div class="form-group"gt;  lt;input type="password" name="confirmPassword" class="form-control"  v-model="newUser.confirmPassword" /gt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;div class="d-flex flex-row"gt;  lt;label class="col-md-4 col-form-label"gt;Roleslt;/labelgt;  lt;div class="col-md-6"gt;  lt;div class="form-group"gt;  lt;input type="roles" name="roles" class="form-control"  v-model="newUser.roles" /gt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;div class="modal-footer"gt;  lt;button type="button" class="btn btn-secondary" data-dismiss="modal"gt;  Cancel  lt;/buttongt;  lt;button type="submit" class="btn btn-primary" @click.stop.prevent="addUser()"gt;  Create user  lt;/buttongt;  lt;/divgt;  lt;/formgt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;!-- END ADD USER MODAL --gt;   lt;!-- USER's INFO MODAL --gt;  lt;div class="modal modal-black fade" id="userInfoModal"  tabindex="-1" role="dialog" aria-labelledby="userInfoModal" aria-hidden="true"gt;  lt;div class="modal-dialog modal-lg" role="document"gt;  lt;div class="modal-content"gt;  lt;div class="modal-header"gt;  lt;h4 class="modal-title" id="userInfoModal"gt;  lt;strong class="text-primary"gt;  {{ userInfo.username }} - {{ userInfo.name }}  lt;/stronggt;'s Basic Information  lt;/h4gt;  lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"gt;  lt;i class="tim-icons icon-simple-remove"gt;lt;/igt;  lt;/buttongt;  lt;/divgt;  lt;div class="modal-body" id="userInfo"gt;  lt;div class="row"gt;  lt;div class="col-6"gt;  lt;pgt;ID: {{ userInfo.id }}lt;/pgt;  lt;pgt;Phone: {{ userInfo.phone }}lt;/pgt;  lt;pgt;Username: {{ userInfo.username }}lt;/pgt;  lt;/divgt;  lt;div class="col-6"gt;  lt;pgt;Name: {{ userInfo.name }}lt;/pgt;  lt;pgt;Email: {{ userInfo.email }}lt;/pgt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;div class="modal-footer d-flex flex-row-reverse"gt;  lt;button type="button" class="btn btn-secondary" data-dismiss="modal"gt;  Close  lt;/buttongt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;!-- END USER's INFO MODAL --gt;   lt;!-- EDIT USER MODAL --gt;  lt;div class="modal modal-black fade" id="userEditModal"   tabindex="-1" role="dialog" aria-labelledby="userEditModal" aria-hidden="true"gt;  lt;div class="modal-dialog modal-lg" role="document"gt;  lt;div class="modal-content"gt;  lt;div class="modal-header"gt;  lt;h4 class="modal-title" id="userEditModal"gt;  Edit user   lt;strong class="text-primary"gt;  {{ userInfo.name }} - {{ userInfo.username }}  lt;/stronggt;  lt;/h4gt;  lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"gt;  lt;i class="tim-icons icon-simple-remove"gt;lt;/igt;  lt;/buttongt;  lt;/divgt;  lt;form class="form-horizontal" method="PUT"gt;  lt;div class="modal-body"gt;  lt;div class="d-flex flex-row"gt;  lt;label class="col-md-3 col-form-label"gt;Usernamelt;/labelgt;  lt;div class="col-md-9"gt;  lt;div class="form-group"gt;  lt;input type="text" class="form-control" name="username"  v-model="userInfo.username" /gt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;div class="d-flex flex-row"gt;  lt;label class="col-md-3 col-form-label"gt;Namelt;/labelgt;  lt;div class="col-md-9"gt;  lt;div class="form-group"gt;  lt;input type="text" class="form-control" name="username"  v-model="userInfo.name" /gt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;div class="d-flex flex-row"gt;  lt;label class="col-md-3 col-form-label"gt;Emaillt;/labelgt;  lt;div class="col-md-9"gt;  lt;div class="form-group"gt;  lt;input type="email" name="email" class="form-control"  v-model="userInfo.email" /gt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;div class="d-flex flex-row"gt;  lt;label class="col-md-3 col-form-label"gt;Roleslt;/labelgt;  lt;div class="col-md-9"gt;  lt;div class="form-group"gt;  lt;input type="roles" name="roles" class="form-control"   v-model="userInfo.roles" /gt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;div class="modal-footer d-flex flex-row"gt;  lt;button type="button" class="btn btn-secondary" data-dismiss="modal"gt;  Close  lt;/buttongt;  lt;button type="submit" class="btn btn-primary" data-dismiss="modal"  @click="updateUser()"gt;  Save Changes  lt;/buttongt;  lt;/divgt;  lt;/formgt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;!-- END EDIT USER MODAL --gt;   lt;!-- REMOVE USER MODAL --gt;  lt;div class="modal modal-black fade" id="userRemoveModal"  tabindex="-1" role="dialog" aria-labelledby="userRemoveModal" aria-hidden="true"gt;  lt;div class="modal-dialog modal-lg" role="document"gt;  lt;div class="modal-content"gt;  lt;div class="modal-header"gt;  lt;h4 class="modal-title" id="userRemoveModal"gt;  Confirm delete user  lt;strong class="text-primary"gt;  {{ userInfo.username }} - {{ userInfo.name }}  lt;/stronggt;?  lt;/h4gt;  lt;button  type="button"  class="close"  data-dismiss="modal"  aria-hidden="true"  gt;  lt;i class="tim-icons icon-simple-remove"gt;lt;/igt;  lt;/buttongt;  lt;/divgt;  lt;div class="modal-body h4 text-white text-center mt-4"gt;  Delete user  lt;strong class="text-danger"gt;  {{ userInfo.username }} - {{ userInfo.name }}  lt;/stronggt;  ?  lt;/divgt;  lt;div class="modal-footer d-flex flex-row"gt;  lt;button type="button" class="btn btn-secondary" data-dismiss="modal"gt;  Cancel  lt;/buttongt;  lt;button type="button" class="btn btn-danger" data-dismiss="modal"  @click="removeUser()"gt;  Delete User  lt;/buttongt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;!-- END REMOVE USER MODAL --gt;  lt;!-- END MODALS --gt; lt;/templategt;  lt;scriptgt; 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) =gt; {  this.users = res.data.data;  });  },  addUser() {  axios  .post(`${API_URL}/users/create`, this.newUser)  .then((res) =gt; {})  .catch((error) =gt; {  console.log("ERRRR:: ", error.response.data);  });  this.$router.push("/manager/users");  },  getUserInfo(user) {  axios  .get(`${API_URL}/users/show/`   user.id)  .then((res) =gt; {  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) =gt; {  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) =gt; {  this.refreshUsers();  })  .catch((error) =gt; {  console.log("ERRRR:: ", error.response.data);  });  },  removeUser() {  axios  .delete(`${API_URL}/users/delete/${this.userInfo.id}`)  .then((res) =gt; {  this.refreshUsers();  })  .catch((error) =gt; {  console.log("ERRRR:: ", error.response.data);  });  },  },  mounted() {  this.refreshUsers();  }, }; lt;/scriptgt;