vue.js - 未捕获的类型错误：_ctx。不是一个函数 [VueJS 3]

Question

当我将所有按钮放在一个组件中并使用单击事件触发模态时遇到问题，我可以将单个按钮放置到单个组件并使用事件单击来创建自定义组件但我质疑是否有任何方法可以将所有按钮放入其中一个组件，它仍然有效。

按钮.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>

用户管理.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>

标签： vue.jsvuejs3