问题出现场景

相关属性的定义:
tableData: [], // 内存多个对象
videoViewObj: {},
相关 html:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<el-button-group>
  <el-button
    type="primary"
    size="small"
    icon="el-icon-edit"
    @click="showEditView(index)"
    >编辑
  </el-button>
  <el-button
    type="danger"
    size="small"
    icon="el-icon-delete"
    @click="handleDelete(tableData[index].id)"
    >删除
  </el-button>
</el-button-group>

<el-dialog title="视频详情" :visible.sync="dialogVideoInfoVisible" width="30%">
  **<el-input v-model="videoViewObj.title" placeholder="请输入视频名"></el-input
  >** <-- 发现无法编辑问题的位置
  <div style="margin-top: 20px">
    <el-checkbox-group v-model="editTagCheckBoxGroup" size="small">
      <el-checkbox-button
        v-for="tag in videoViewObj.tags"
        :label="tag"
        :key="tag"
        >{{tag}}
      </el-checkbox-button>
    </el-checkbox-group>
  </div>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVideoInfoVisible = false">取 消</el-button>
    <el-button type="primary" @click="doUpdate">确 定</el-button>
  </span>
</el-dialog>

相关 js:
showEditView(index) {
// this.videoViewObj = this.tableData[index] <—— 最初出现问题的位置 (1)
this.videoViewObj = Object.assign(this.videoViewObj, this.tableData[index]) <—– 修改(1)后出现问题的位置 (2)
this.dialogVideoInfoVisible = true;
this.editTagCheckBoxGroup = this.videoViewObj.tags;
},

问题解决办法

(1)–>(2)将拷贝方式换为：this.videoViewObj = Object.assign({}, this.tableData[index])

问题解决原理

(1)第一次的写法相当于浅拷贝，所以源数据的变动会影响当前数据.所以我考虑使用深拷贝的方式,于是我想到了 Object.assign.
(2)vue 无法监听动态新增属性的变化。

参考https://blog.csdn.net/weixin_43043994/article/details/99468035

我当时定义的 videoViewObj 为空,所以新增的 title 属性 vue 监听不到.
测试：为 videoViewObj 添加 title 属性后同样可以编辑 title.