发布方法不会将结果添加到表中

问题描述

每当我尝试将用户推送到表中时，它什么都不做。有人可以告诉我我在做什么错吗？

.wrapper.d-flex.flex-column
    br
    input#fname(type='text',name='text' placeholder="name" v-model="name")
    br
    br
    input#lname(type='email',name='email' placeholder="email" v-model="email")
    br
    input#lname(type='phone',name='phone' placeholder="phone" v-model="phone")
    br
    input(type='submit',value='Submit' @click="addUser()")

data() {
   return  {
     users: [],name: '',email: '',phone: ''
   }

adduser() {
      axios.post('https://jsonplaceholder.typicode.com/users/',{
        name: this.name,email: this.email,phone: this.phone
      }).then((response) => {
        this.users.push(response.data);
      }).catch((error) => {
        console.log(error);
      })
    },

解决方法

在then函数this中，关键字指的是不同的对象。因此，您需要在发布方法之前存储this值。您可以尝试使用此功能：

adduser() {
  var that = this;
  axios.post('https://jsonplaceholder.typicode.com/users/',{
    name: this.name,email: this.email,phone: this.phone
  }).then((response) => {
    that.users.push(response.data);
  }).catch((error) => {
    console.log(error);
  })
},