Vue中，要同时展示数组中对象的原始值和修改后的值，

在Vue中，如果你想在列表中同时显示数组对象的原始值和用户修改后的临时值，可以采用以下策略：

1. 使用`v-if`或`v-show`区分状态：创建两个版本的属性，一个是原始的数据数组(`originalItems`)，另一个是包含临时修改值的副本(`modifiedItems`)。

data() {
  return {
    originalItems: [
      { id: 1, name: '原始名称1', modifiedName: '' },
      { id: 2, name: '原始名称2', modifiedName: '' },
    ],
    modifiedItems: JSON.parse(JSON.stringify(originalItems)), // 深拷贝原始数据
  };
},

2. 渲染时切换展示：

<template>
  <ul>
    <li v-for="(item, index) in isEditing ? modifiedItems : originalItems" :key="item.id">
      {{ item.name }} (原始值): {{ item.modifiedName }}
      <button @click="editItem(index)">编辑</button>
    </li>
  </ul>
</template>

<script>
export default {
  data(),
  methods: {
    editItem(index) {
      this.isEditing = true; // 开始编辑模式
      this.modifiedItems[index].name = this.originalItems[index].name;
      this.modifiedItems[index].modifiedName = this.originalItems[index].name;
    },
    saveChanges() {
      // 这里可以将 modifiedItems 回写回 originalItems 或者保存到服务器
      this.isEditing = false;
    },
  },
};
</script>

在模板中，当`isEditing`为`true`时，显示`modifiedItems`，用户点击“编辑”按钮进入编辑模式，此时`modifiedName`开始记录用户的修改。

3. 提交更改：
在编辑完成后，调用`saveChanges`方法，将`modifiedItems`中的更改合并回`originalItems`，然后关闭编辑模式。