【vue】使用v-model双向绑定数据，改变一个data导致多个data同时改变

最新推荐文章于 2024-05-13 16:55:49 发布
最新推荐文章于 2024-05-13 16:55:49 发布
阅读量5.1k 收藏 4
点赞数
分类专栏： vue 文章标签： vue v-model 数据绑定
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37451395/article/details/99672995
版权

场景：

        修改一个列表数组的一项，点击修改后弹出修改面板，此时改变数据会导致列表数组的那一项同时改变，页面渲染也出现了变化。可是我们需要的是在用户点击保存后再修改到页面。

页面遍历cateList，修改第一项时定义cate = cateList[0]

页面遍历cateList，修改第一项时定义cate = cateList[0]
此时若修改cate里的数据，cateList[0]里的数据也会同步修改

解决方案：

        

//在将cateList[0] 复制给cate时做一部JSON操作即可

let cate = JSON.stringify(this.cateList[0])
this.cate = JSON.parse(cate)

 

温城（Anson）
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue自定v-model实现表单数据双向绑定问题
10-18
Vue.js 是一个流行的前端JavaScript框架，其核心特性之一就是数据双向绑定。在Vue中，`v-model`指令被广泛用于实现这一功能，特别是在处理表单输入时。它简化了开发者在视图层和数据模型之间的交互，使得数据的更新...
vue中使用v-model在对多个数据进行一键录入之后，进行修改出现整列数据都会被改变的问题
am123999的博客
05-31 1031
vue中使用v-model在对多个数据进行一键填充之后，进行修改单行出现整列数据都会被改变的问题 现象：其他输入框的值也会随之改变 代码: //需要一键填充的数据 const newScore = data; for(let i=0;i<this.tableDate[0].scores.length;i++){ //存到数组里 newScores.push(newScore); } co
v-model双向绑定-解决编辑弹框修改数据后页面数据跟着改变的问题
weixin_46753476的博客
07-07 1246
在vue的项目中，经常会遇到表格弹框的使用，点击编辑按钮时候把当前行的数据赋值给弹框内并渲染弹框数据。使用v-model弹框数据改变发现页面数据也跟着改变了，而在实际工作当中，当点击弹框的保存按钮，表格数据才要更新...
Vue--模板语法、数据绑定、data与el的两种写法、MVVM模型
最新发布
weixin_42654944的博客
05-13 395
2、vm身上所有的属性 及vue原型上所有属性，在vue模板中都可以直接使用。3、VM：视图模型（ViewModel）：Vue实例对象。1、data中所有的属性，最后都出现在了vm身上。1、M：模型（Model）：对应data中的数据。2、V：视图（View）：模板代码。
「VUE 3」 v-model 的使用变化
老古懂的博客
05-13 537
我们知道响应式数据是vue的一个特点，通过v-mold能够实现数据的实时响应，但是我们也应该清楚v-model 是语法糖，本质还是父子组件间的通信。 其实质上还是通过 props，父组件给子组件传值再通过 Events up，子组件使用 $emit 触发事件将数据传回给父组件。 vue2.x //父组件 <child v-model="msg"></child> //子组件 <template> <div> <input type="text"
vue使用push添加多条相同数据，改变其中一条数据导致其他的数据随之改变
weixin_50606255的博客
12-26 2339
当使用push添加多条数据时，多条数据指向的是同一个内存地址，修改其中一条数据相当于修改了所指内存的值，所以每条数据都改变了。
vue之v-model绑定的变量赋值给了另外一个变量后，两个变量同时改变问题
peng_da818的博客
02-18 1316
问题：我想将this.info对象赋值给this.detial对象，然后通过v-mode绑定this.detial对象的值，在改变this.detial的值的同时，this.info的值也改变了。 原因：object在赋值的时候传递的不是值，而是引用，他们指向的是同一个空间。 解决： 第一种：利用 JSON.parse 和 JSON.stringifyxml this.submitForm = JSON.parse( JSON.stringify(this.formDat.....
Vuejs学习笔记之使用指令v-model完成表单的数据双向绑定
10-17
在Vue.js中，`v-model`指令是实现数据双向绑定的关键，它允许开发者轻松地在视图和模型之间同步数据。在表单控件如输入框、文本域、单选按钮、复选框等元素上使用`v-model`，可以实现实时更新数据，极大地简化了前端...
详解vue中v-model和v-bind绑定数据的异同
10-14
总结起来，`v-bind` 和 `v-model` 在Vue中分别代表单向数据绑定和双向数据绑定，它们都用于建立组件和数据之间的桥梁。`v-bind` 更适合于静态属性的设置和更新，而 `v-model` 则适用于表单元素的交互，提供便捷的...
Vue循环中多个input绑定指定v-model实例
10-14
在Vue.js中，`v-model`是一个非常强大的特性，它实现了视图与数据的双向绑定，使得我们在处理用户输入时能轻松地获取和更新数据。当涉及到在循环中使用`v-model`时，通常是为了创建多个类似的表单元素，如在列表或...
vue.js使用v-model指令实现的数据双向绑定功能示例
10-18
在Vue中，`v-model`指令是实现数据双向绑定的关键特性之一，这使得UI（用户界面）与应用程序的状态能够实时同步，极大地简化了表单处理和动态数据更新。 双向绑定意味着当你在视图层（例如输入框、选择框或复选框）...
vue之v-model双向绑定修改data时注意事项
进击的豌豆的博客
04-12 1014
先说结论：在双向绑定修改值时，只要牵扯到data的方法或者插值表达式，都会重新执行一遍 如下demo含义，通过双向绑定给title重新赋值。 <template> <div> <h2>{{ title }}</h2> <h2>{{ title }}</h2> <h2>{{ title }}</h2> <h2>{{ getTitle() }}</h2>
3分钟认识Vue3的v-model
emgexgb_sef的博客
08-01 508
v-model是Vue内置的指令作为属性接收一个变量（不能是常量）绑定到普通组件和自定义组件中//作为普通组件的属性,只有作为表单内的元素属性时才会生效如//作为自定义组件的属性v-model同时做了两件事情属性绑定和自定义事件绑定//内置组件//相当于//自定义子组件//相当于v-model绑定在自定义组件上时，我们需要手动去接收//自定义组件注意。...
数据双向绑定v-model的使用和原理
小小前端攻城狮的博客
03-25 6563
简述 表单控件在实际开发中式非常常见的，特别是对于用户信息的提交，需要大量的表单 Vue中使用v-model指令来实现表单元素和数据的双向绑定 简单使用 当我们在输入框输入内容时,因为input中的v-model绑定了message，所以会实时将输入的内容传递给message,message发生改变 当message发生改变时，因为上面我们使用Mustache语法，将message的值插入到DOM中，所以会发生响应的改变 所以，通过v-model实现双向绑定,我们也可以将v-model用
问题：vue2修改对象属性值，数据改变，但是页面视图不更新
qq_44792224的博客
11-22 4029
v-if不要绑定数组元素，无效，数组元素内容的变化无法响应v-if绑定对象属性 {1: true, 2: false}，如果提前写死，v-if绑定其中一个属性，则可以生效v-if如果对象的属性数量不定，是通过某方法的触发去改变对象的属性数量。需要使用$set()//增改都适用this.$set(this.对象名， 属性名， 新值)//不可以使用下面的方法更新this.对象.属性 = 新值//或者this.对象[属性] = 值只要所有修改或者增加属性的语句都使用，就能解决v-if。
子组件的input框v-model绑定父组件的属性，当父组件的属性发生改变时，由于指令的存在，导致值未更新上去
qq_40335247的博客
08-30 492
v-model事件本质上是，Vue.directive的一个特殊指令，保函的处理函数是update因此，在使用自定义指令update（一般优先v-model执行）的时候可能会与v-model冲突目前采用如下方式，解决冲突，同时过滤字符.
vue中的v-model绑定数据深层次问题
热门推荐
shimeifang11的博客
07-02 1万+
vue有些赋值方式是非响应式的，页面不会刷新，可以参考下面（百度参考）： Vue 不能检测以下变动的数组： 当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue 当你修改数组的长度时，例如：vm.items.length = newLength 当第一种情况需求时，可以使用this.$set(this.arr,index,newVal)...
Pytorch dataloader加载指定的数据
FrankDura的博客
11-10 2091
综述 pytorch dataloader加载指定的数据 方法 import itertools 实现 target_3d_vd = next(itertools.islice(self.test_loader, test_index, None)) 假设self.test_loader是数据loader. test_index是需求的数据index。 ps:如果testdata的batch不是1 test_index = int(np.floor(test_index/batc
vue2v-model双向数据绑定
10-13
vue2中的v-model指令可以实现双向数据绑定，它可以将表单元素的值与Vue实例中的数据进行绑定，当表单元素的值发生变化时，Vue实例中的数据也会随之改变，反之亦然。 例如，我们可以使用v-model指令将input元素的值与Vue实例中的message数据进行绑定： ``` <template> <div> <input type="text" v-model="message"> <p>{{ message }}</p> </div> </template> <script> export default { data() { return { message: '' } } } </script> ``` 在上面的代码中，当我们在input元素中输入内容时，Vue实例中的message数据也会随之改变，同时在p元素中也会显示出当前message的值。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值