未捕获的类型错误：_ctx.不是函数[VueJS 3]

lymnna71  于 2023-04-12  发布在  Vue.js
关注(0)|答案(2)|浏览(220)

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

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

2条答案

按热度按时间
v9tzhpje

v9tzhpje1#

我遇到了同样的问题，解决方案是将每个按钮发送到不同的功能

赞(0）分享  回复(0）举报  2023-04-12
cedebl8k

cedebl8k2#

我不知道它是否对你有帮助，但总是尽量让你的方法：{}在data（）{}之外，以避免vue.js中的上下文错误

赞(0）分享  回复(0）举报  2023-04-12
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com