Javascript 取消编辑功能不支持'；无法在Vue组件中工作

我很难弄清楚为什么我不能取消编辑我的一个输入。 下面是代码片段。 有人能指出那里的错误吗

以下是一个输入：

        <div v-if="!showInput" @dblclick="showInputChange" class="name-team">
            {{ team.team_name }}
        </div>
        <div v-if="showInput" class="change-input">
            <input type="text" v-model="changeTeamName" @keyup.esc="cancelEdit" @blur="cancelEdit" 
            @keyup.enter="cancelEdit" placeholder="Введите новое название">
        </div>

和取消编辑功能：

            cancelEdit: function() {
            this.changeTeamName = this.beforeEditCache;
            this.showInput = false;
        }

---

谢谢大家!

在Vue中使用简单赋值语法将一个对象复制到另一个变量会使两个对象保持链接，因此对其中一个对象所做的任何更改都会对另一个对象进行更改。这就是为什么当您尝试使用

beforeEditCache

取消编辑时，它不起作用，因为两个实例中的数据都已更改

要解决这个问题，请使用JavaScript或for数组和嵌套对象

            cancelEdit: function() {
            this.changeTeamName = this.beforeEditCache;
            this.showInput = false;
        }