我正在嘗試在Vue.Js中構建CRUD應用程序，但是我無法插入用戶

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 ，它將起作用。