如何在 Vue js 中使用 axios 更新我的 rails api 数据库中的记录？答案

【问题标题】：How to update a record in my rails api database using axios in Vue js?如何在 Vue js 中使用 axios 更新我的 rails api 数据库中的记录？
【发布时间】：2020-01-05 10:11:53
【问题描述】：

我有这个更新方法，并且我读到 axios 使用 put 而不是 patch 来更新记录，所以我试图从我的 Vue js 应用程序更新我的 rails Api 上的记录，但它返回了 404 错误。

我该如何解决？

updateBook() {
      const book = {
        book_id: this.books.id,
        book_title: this.books.id,
        author_id: this.books.author_id,
        genre_id: this.books.genre_id,

        set bookTitle(title) {
          this.book_title = title;
        },
        set authorId(id) {
          this.author_id = id;
        },
        set genreId(id) {
          this.genre_id = id;
        },
        get title() {
          return this.book_title;
        },
        get id() {
          return this.book_id;
        },
      };
      book.bookTitle = this.book_title;
      book.authorId = this.author_id;
      book.genreId = this.genre_id;
      axios.put('http://localhost:3000/api/v1/books/', book.id)
        .catch((error) => { console.log(error); });
    },

【问题讨论】：

您确定http://localhost:3000/api/v1/books/ 有效吗？ 404通常表示没有找到终点。
我正在尝试将此地址与书籍 ID 连接起来，这就是为什么我在末尾有“, book.id”。但是，地址本身可以工作！
.put 的多个参数不是这样工作的：github.com/axios/axios#axiosputurl-data-config。改用`http://localhost:3000/api/v1/books/${book.id}` 作为 URL。

标签： ruby-on-rails vue.js axios

【解决方案1】：

你应该像这样连接地址：

`http://localhost:3000/api/v1/books/${book.id}`

而你应该传递的第二个参数是你想要更新的数据

axios.put(`http://localhost:3000/api/v1/books/${book.id}`, {
    data: newData // this is just an example
})
.catch((error) => { console.log(error); });

【讨论】：