Я пытаюсь создать приложение CRUD В Vue.Js я не могу вставить пользователя

Question

Я получаю сообщение об ошибке при попытке вставить данные в базу данных. это ошибка, которая вызвала ----> Свойство или метод "saveUser" не определен в экземпляре, но на него ссылаются во время рендеринга <----- </p>

вот мой код

<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 должен быть частью вашей methods опоры вашего экземпляра Vue. Переместите его на methods, и оно будет работать.