问题出现场景

相关属性的定义:
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.