首页 > 其他分享 >vue绑定对象,绑定的值不改变的问题

vue绑定对象,绑定的值不改变的问题

时间:2024-05-11 20:52:08浏览次数:32  
标签:count findIndex vue 对象 绑定 字段 newItem oldArr

在使用vue结合elmentui的table组件,对数组绑定,需要编辑数组里一些属性的值。我的情况是,需要在打开这个表时,根据条件插入一些对象到table里,经测试,到这里是没问题的,可以显示新插入的对象。问题在于,当我改变这些新插入对象的count字段时,发现输入数字,输入框的数字并没有改变,而在不是新插入的对象上,输入count字段是没问题的。然后,当我去更改这个对象的其他值时,这时原来那个有问题的(值不改变)count字段发生了变化。 这里要说个前提:我新插入的对象是从另一个数组那得来的, oldArr=[...];//这是原数组; ......//省略代码 let newItem=oldArr[findIndex]; newItem.count=1;//注意oldArr里的对象都没得count字段,oldArr的其他字段在dataTable中是有的 tableData.splice(findIndex,0,newItem);//插入 大概就是这样。 这时,我猜到,其他字段没问题,而偏偏这个没有的count字段有问题,原因可能是因为newItem插入到tableData中去了,有count字段,但是oldArr[findIndex]里没有count;虽然它们指向同一个对象,但说不定有什么差异(没研究过),这时oldArr[findIndex]可能也受到vue的绑定了,就是因为oldArr[findIndex]没有count属性所以才绑定有问题。 然后我的解决办法是:把newItem,deepClone一下,让它是一个独立的对象,斩断和oldArr[findIndex]的联系,这时绑定count值就没问题了。 tableData.splice(findIndex,0,deepClone(newItem)); 以上就是这次的分享。

标签:count,findIndex,vue,对象,绑定,字段,newItem,oldArr
From: https://www.cnblogs.com/HelloQLQ/p/18187141

相关文章

  • Vue3笔记
    1.man.js文件//引入一个工厂函数createAppimport{createApp}from'vue'importAppfrom'./App.vue'//创建应用实例对象app---类似于vue2中的vm,但app比vm更'轻'constapp=createApp(App)console.log('app',app)app.mount('#app......
  • Vue项目中有封装过axios吗?主要是封装哪方面的?
    一、axios是什么axios 是一个轻量的 HTTP客户端基于 XMLHttpRequest 服务来执行 HTTP 请求,支持丰富的配置,支持 Promise,支持浏览器端和 Node.js 端。自Vue2.0起,尤大宣布取消对 vue-resource 的官方推荐,转而推荐 axios。现在 axios 已经成为大部分 Vue 开发者的......
  • 使用c#强大的表达式树实现对象的深克隆
    一、表达式树的基本概念表达式树是一个以树状结构表示的表达式,其中每个节点都代表表达式的一部分。例如,一个算术表达式a+b可以被表示为一个树,其中根节点是加法运算符,它的两个子节点分别是a和b。在LINQ(语言集成查询)中,表达式树使得能够将C#中的查询转换成其他形式的查询,......
  • 【Java】创建对象的几种方式
    1.new创建新的对象Stringstr=newString("str");2.通过Java的反射机制publicstaticvoidmain(String[]args)throwsException{//获取类的Class对象Stringstr=(String)Class.forName("java.lang.String").newInstance();System.out......
  • React、Vue我全都要!React Hook 实现 Vue 的11个基本功能
    注:转自https://zhuanlan.zhihu.com/p/647975794,非商用,仅用于自我学习1、JSX和template在Vue2中是使用template的,这点使用Vue的同学们都知道,而在React中使用的是JSX,JSX是一个看起来很像XML的JavaScript语法扩展。它有以下优点:JSX执行更快,因为它在编译为JavaScript......
  • python教程11-面向对象
    python的面向对象和java有一些不一样:(java中,只有在类中定义的变量实例才能用,但是python更加灵活)类变量:类变量在整个实例化的对象中是公用的。类变量定义在类中且在函数体之外。类变量通常不作为实例变量使用。实例变量:在类的声明中,属性是用变量来表示的,这种变量就称为实例变量,实......
  • C#中的对象深拷贝和浅拷贝
    1.浅拷贝publicclassPerson{publicPerson(){this.Address=newAddress();}publicstringName{get;set;}publicintAge{get;set;}publicAddressAddress{get;set;}publicPersonClone(){re......
  • uniapp 小程序 实现 vue 实现手写签名
    方法一<template><viewclass="signBox"><viewclass="topHint">请在下方空白书写区域内写出您的名字</view><viewclass="btn"><viewclass="saveBtn"@click="save"......
  • vue和react的相同点和不同点
    Vue和React作为现代前端开发中流行的两个JavaScript框架,它们有诸多相似之处,同时也存在一些关键性的不同。以下是Vue和React的一些主要相同点和不同点:相同点:虚拟DOM:Vue和React都使用虚拟DOM(VirtualDOM)来提高性能,减少直接操作真实DOM的频率,从而加快页面渲染速度。组件化开发:两......
  • 单项数据流和双向数据绑定的原理,区别
    单项数据流(UnidirectionalDataFlow)和双向数据绑定(Two-wayDataBinding)是前端开发中两种不同的数据管理方式,尤其在Vue和React这类现代前端框架中体现得尤为明显。下面简要概述它们的原理和区别:单项数据流(React的典型模式)原理:单项数据流的核心思想是数据从父组件流向子组件,形......