Vuejs拖拽排序项目，并保存到mongoDB与Axios

Question

我是初学者，我的目标是从数据库中获取项目，拖动和排序，然后将排序的列表保存在我的数据库中。我已经设法获取并设置了拖动排序vuejs组件，并且我获得了排序项的密钥对值，但我不知道如何将其保存到数据库中。

当我执行saveNewSequence时，我从forEach获得控制台日志值，但当我刷新我的页面时，我得到错误:请求已中止。并且我的列表在数据库中没有更新...我相信我必须以某种方式将键值与id联系起来...你能帮帮我吗。

Vue组件：

data() {
    return {
      ropes: [],

    }
  },

methods:{

     saveNewSequence() {
      this.ropes.forEach((rope, key)=>{
        console.log('Key' + key +' '+ rope._id)
      })

      let postData = {}
      postData.ropes = this.ropes.map(rope=>{
        return{
          title: rope.title,
          description:rope.description,
          image: rope.image,
          price: rope.price,
          cartQuantity: rope.cartQuantity

        }
      })
      axios.post('https://zokadb.herokuapp.com/api/ropes', postData)
          .then((res) => {
            console.log(res)

          }).catch(error => {
        console.log(error)
      })


    },

}

这是我的mongoDB模型：

const ropeSchema = new mongoose.Schema({
    title: {
        type: String,
        required: true,

    },

    description: {
        type: String,
        required: true,

    },
    image: {
        type: String,
        required: false,
    },


    price: {
        type: Number,
        required: true,

    },
    cartQuantity: {
        type: Number,
        required: true,
    },


    date: {
        type: Date,
        default: Date.now
    }
})

Answer 1

尝试：

postData = this.ropes.map(rope=>{
...

而不是：

postData.ropes = this.ropes.map(rope=>{
...

如果您想使用postData发送post请求：

axios.post('https://zokadb.herokuapp.com/api/ropes', postData)
...