深入理解Vue数据修改-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_46253682/article/details/125604084

本文详细探讨了Vue框架中如何修改数据，从响应式原理到数据绑定，包括Vue实例的data属性、Vue.set方法以及计算属性的使用。通过实例解析，帮助开发者掌握正确更新组件状态的技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//修改
<el-button @click="handleModifyRow(scope.row)" type="warning" size="small"
						v-if="scope.row.vocabularyStatus == 0">
							修改</el-button>

<el-dialog title="修改词汇" :visible.sync="modifyFormVisible">
				<el-form :model="DataModify" :rules="rules" ref="tableDataAddition">
					<el-form-item label="书名" :label-width="formLabelWidth" prop="context">
						<el-input v-model="DataModify.bookName" autocomplete="off"disabled ></el-input>
					</el-form-item>
					<el-form-item label="中文" :label-width="formLabelWidth" prop="context">
						<el-input v-model="DataModify.context" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="英文" :label-width="formLabelWidth" prop="contextEn">
						<el-input v-model="DataModify.contextEn" autocomplete="off"></el-input>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
									<el-button @click="modifyFormVisible = false">取 消</el-button>
									<el-button type="primary" @click="handleModify()">确 定</el-button>

//修改词汇
handleModifyRow(row) { //修改词汇
				console.log("修改词汇",row);
				this.modifyFormVisible = true
				this.reqModifyData.data = row//未提交的時候做準備
				this.DataModify.bookName=row.bookName
				this.DataModify.context=row.context
				this.DataModify.contextEn=row.contextEn
			},

reqModifyData: { //提交请求数据
					data: {
						userId: this.$store.state.userInfo.id, //用户
					}
				},

DataModify: {
					bookName:'',
					id:0,
					userId: this.$store.state.userInfo.id, //用户,
					context: '',
					contextEn: ''
				}, //修改对象

handleModify() { //修改
				this.doModify()
			},

doModify() { //执行删除
				const that = this
				this.reqModifyData.data.userId=this.$store.state.userInfo.id
				this.reqModifyData.data.context=this.DataModify.context
				this.reqModifyData.data.contextEn=this.DataModify.contextEn
				this.reqModifyData.data.vocabularyStatus = 0
				console.log('this.reqModifyData.data',this.reqModifyData.data);
				console.log('this.reqModifyData.data.contextEn',this.reqModifyData.data.contextEn);
				console.log('this.DataModify.contextEn',this.DataModify.contextEn);
				
				updateVocabularyInfo(this.reqModifyData).then(res => { //添加词汇
					if (res.code == 0) {
						that.modifyFormVisible = false
						that.loadList()
						this.$message({
							type: 'success',
							message: '提交成功!'
						});
					}else {
						this.$message({
							type: 'error',
							message: '提交失败!'
						});
					}
				})
			},

vue修改数据