我正在尝试构建一个 CRUD 应用程序 Vue.Js 我无法插入用户

Question

我在尝试将数据插入数据库时遇到错误。这是触发的错误 ----> 属性或方法 "saveUser" 未在实例上定义但在渲染期间被引用 <-----

这是我的代码

<script>
import axios from 'axios'

export default{
  data(){
    return{
      errorMessage: "",
      successMessage: "",
      users: [],
      newUser: {username: "", name: "", email: ""}
    }
  },
  mounted: function(){
    this.getAllUsers();
  },
  methods:{
    getAllUsers: function(){
      axios.get('http://localhost:8888/vue-and-php/public/api/config.php?action=read', { crossdomain: true })
      .then((response) => {
        //console.log(response);
        if(response.data.error){
          this.errorMessage = response.data.message;
        }else{
          this.users = response.data.users;
        }
        });
    }
  },
  saveUser: function(){
    console.log(this.newUser);
  }
}
</script>

这是我要申请的地方

                  <!--modal-->
                  <div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
                    <div class="modal-dialog" role="document">
                      <div class="modal-content">
                        <div class="modal-header">
                          <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
                          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                          </button>
                        </div>
                        <div class="modal-body">
                          <table class="form table">
                            <tr>
                              <th>Username</th>
                              <th>:</th>
                              <th><input type="text" name="" v-model="newUser.username"/></th>
                            </tr>
                            <tr>
                              <th>Name</th>
                              <th>:</th>
                              <th><input type="text" name="" v-model="newUser.name"/></th>
                            </tr>
                            <tr>
                              <th>Username</th>
                              <th>:</th>
                              <th><input type="text" name="" v-model="newUser.email"/></th>
                            </tr>
                          </table>
                        </div>
                        <div class="modal-footer">
                          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                          <button type="button" class="btn btn-primary" @click="saveUser();">Save changes</button>
                        </div>
                      </div>
                    </div>
                  </div>
                  <!--// -->

浏览器正在触发此错误 --->

Error in v-on handler: "TypeError: _vm.saveUser is not a function"

如何解决这个问题我是新手Vue.js我还在学习

Answer 1

saveUser 应该是 Vue 实例的 methods 道具的一部分。将其移至 methods 即可。

我正在尝试构建一个 CRUD 应用程序 Vue.Js 我无法插入用户

I am trying to build a CRUD application In Vue.Js i cannot insert user

crud

vue.js

vue-component

vuejs2