Vue.js 双向绑定实现商品编辑实时更新

在Vue.js中，编辑商品信息时，希望修改后的值能立即反应到商品对象中，实现实时更新的功能。本文将介绍如何使用v-model指令来实现这一功能。

问题描述：

在编辑商品信息后，点击保存按钮，仍然输出的是旧的商品属性，而不是修改后的值。

解决方法：

可以通过在编辑表单中添加v-model指令，将输入框与对应的属性值进行双向绑定，实现编辑时实时更新商品对象的功能。

具体实现步骤：

在编辑表单中绑定v-model指令：

为每个需要编辑的属性绑定v-model指令，将输入框的值与对应的属性值进行双向绑定。例如：
```
<input type='text' v-model='editGoods.name'>
<input type='text' v-model='editGoods.price'>
```

在editGoods方法中保存编辑后的属性值：

将编辑后的属性值保存到editGoods对象中，而不是直接修改商品对象。例如：

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 {
      this.editGoods[key] = value; // 将编辑后的属性值保存到editGoods对象中
    }
  }
},

在saveGoods方法中更新商品对象：

将editGoods对象的属性值赋给商品对象，实现更新商品对象的功能。例如：

saveGoods(id) {
  const item = this.goodsList.find(item => item.id === id)
  // 将editGoods对象的属性值赋给商品对象
  Object.keys(this.editGoods).forEach(key => {
    item[key] = this.editGoods[key];
  });
  // 发送请求保存修改
  console.log('保存商品', item)
},

代码示例：

<template>
  <div>
    <ul>
      <li v-for='(item, index) in goodsList' :key='index'>
        <span>{{ item.name }}</span>
        <button @click='editGoods(item.id)'>编辑</button>
      </li>
    </ul>
    <div v-if='showEdit'>
      <input type='text' v-model='editGoods.name'>
      <input type='text' v-model='editGoods.price'>
      <button @click='saveGoods(editGoods.id)'>保存</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      goodsList: [
        { id: 1, name: '商品1', price: 100 },
        { id: 2, name: '商品2', price: 200 }
      ],
      showEdit: false,
      editGoods: {}
    }
  },
  methods: {
    editGoods(id) {
      this.showEdit = true;
      this.editGoods = this.goodsList.find(item => item.id === id);
    },
    saveGoods(id) {
      const item = this.goodsList.find(item => item.id === id)
      // 将editGoods对象的属性值赋给商品对象
      Object.keys(this.editGoods).forEach(key => {
        item[key] = this.editGoods[key];
      });
      // 发送请求保存修改
      console.log('保存商品', item)
      this.showEdit = false;
    }
  }
}
</script>

总结：

通过使用v-model指令，我们可以轻松实现商品编辑时的双向绑定功能，使编辑后的值立即更新到商品对象中，提高用户体验。同时，我们也需要注意数据更新的时机，避免数据不一致的问题。