Question

我有前面的vuejs和后端java。在一个组件中，我从数据库中引入用户。

Users.vue

getUsers() {
  this.$http.get("/user")
    .then((response) => {
      this.users = response.data.users;
    })
}

仍然在这里我使用v-for将所有用户带入另一个组件User.vue。

<app-user v-for="user in users" :user="user" :key="user.index"></app-user>

在用户组件中，我有一个路由器链接，可以将我带到另一个页面，我可以在其中编辑用户名。

User.vue

 <p class="user-name">{{user.firstName}}</p>
 <router-link :to="'/users/edit-user/'+user.id">
    <a ><i class="ti-pencil-alt" aria-hidden="true"></i></a>
 </router-link>

EditUser.vue

    <template>
      <input type="text" :value="user.firstName" v-model="userInfo.firstName">
    </template>
    <script>
    export default {
      data() {
        return {
          user: {},
          userInfo: {
            firstName: '',
          }
        }
      },
      created() {
        this.getUsers();
      },
      methods: {
        getUsers() {
          this.$http.get("/user/" + this.$route.params.id)
            .then((response) => {
              this.user = response.data;
            })
        },
        updateUser() {
          axios.put('/user', this.userInfo,  
            {'headers':{'X-AUTH-TOKEN':localStorage.token}},
            {'headers':{'Content-Type': 'application/json'}})
          .then((response) => {
            console.log("Success! You edited the user"); 

          })
          .catch((response) => {
            console.log('Error in edit');
          })
        }
      },
    }
    </script>

我一个月前开始学习vuejs，仍然需要学习:)。

在输入中，我使用:value="user.firstName"来获取已存在的firstName的值。我尝试使用v-model="userInfo.firstName"来获取userName的新值，但是当我把它放入时，已经存在的值会从输入中消失。

使用帖子保存数据很好但仅限于axios。我不知道为什么帖子不能与vue-resource一起工作。所以我也尝试使用axios，但是当我按下保存按钮时编辑的内容，在EditUser.vue上，我的请求没有转到服务器。

我这样说是因为我看到后端我没有收到任何错误，没有任何错误，但如果我使用帖子或获取，我可以获得或保存用户。

我的代码中哪些操作错误，我没有编辑用户？

Answer 1

您的axios实施似乎没有任何问题。在我看来，您正在更新为general / users / route。这适用于post，因为尚未存在用户ID，因此将创建一个新用户ID。但是，如果使用PUT，则确实存在用户标识。所以我认为你应该将你的端点修改为/ user /：userid而不仅仅是/ user。希望这会有所帮助。

来自restapitutorial dot com / lessons / httpmethods.html：

示例：

Axios和vue-resource put方法不起作用

1 个答案: