vue 要修改数组中某个字段，既要展示字段原始值，又要修改该字段如何处理区分字段

在Vue中，如果你想同时显示数组元素的原始值和允许用户编辑这个字段，你可以这样做：

1. 使用`v-model`指令：Vue的双向绑定允许你在模板上直接操作数据，并自动同步到实例属性。对于数组元素，可以给需要修改的字段添加`v-model`，比如假设你要修改的是`item.title`。

<template>
  <div v-for="(item, index) in items" :key="index">
    <span>{{ item.title }} (原始)</span> <!-- 显示原始值 -->
    <input type="text" v-model="items[index].title"> <!-- 修改输入框，绑定到数组元素的title -->
  </div>
</template>

2. 保持数据一致：当你通过`v-model`修改了数组元素时，Vue会自动更新视图，所以无需额外手动操作。但是如果你需要在修改后做其他处理，可以在组件内的`methods`里监听`$set`或数组的索引变化来进行回调。

export default {
  data() {
    return {
      items: [
        { title: '原始标题1' },
        { title: '原始标题2' }
      ]
    };
  },
  methods: {
    updateTitle(index, newTitle) {
      this.items.splice(index, 1, { ...this.items[index], title: newTitle });
    } // 当用户提交新标题时触发此方法
  }
}

在上面的例子中，`updateTitle`方法会在数组的指定位置替换一个新对象，保留原来的键值对并更新`title`字段。