Vue.js 商品编辑保存后属性不更新问题解决方法

在编辑商品信息后，点击保存按钮，需要调用 saveGoods 方法来发送请求保存修改。在 saveGoods 方法中，需要将修改后的商品对象传递给后台进行保存。如果修改后的属性仍然是旧属性，可以尝试在编辑商品时，添加一个双向绑定的功能，将修改后的值立即更新到商品对象中，然后再调用 saveGoods 方法进行保存。这样就能确保修改后的属性能够正确地更新到商品列表中。

代码示例：

editGoods(id, key, value) {
  let goods = this.goodsList.find(item => item.id === id);
  if (goods) {
    if (key === 'cid') {
      let noteObj = goods.note ? JSON.parse(goods.note) : {};
      noteObj.cid = value;
      goods.note = JSON.stringify(noteObj);
    } else if (key === 'yid') {
      let noteObj = goods.note ? JSON.parse(goods.note) : {};
      noteObj.yid = value;
      goods.note = JSON.stringify(noteObj);
    } else {
      goods[key] = value;
    }
  }
},

saveGoods(id) {
  const item = this.goodsList.find(item => item.id === id)
  // 发送请求保存修改
  console.log('保存商品', item)
} 

解决方案：

1. 使用双向绑定: 在编辑商品信息时，使用 v-model 指令将输入框的值与商品对象的属性进行双向绑定，这样修改后的值就会实时更新到商品对象中。

2. 手动更新商品对象: 在 editGoods 方法中，手动将修改后的值更新到商品对象中，并在 saveGoods 方法中传递更新后的商品对象。

建议：

使用双向绑定是更优雅的解决方案，它可以简化代码，并提高开发效率。

注意：

确保在 saveGoods 方法中传递的是更新后的商品对象，而不是旧的商品对象。