当前位置: 首页 > Web前端 > HTML

this.$set在Vue中的用法-可以用来修改对象数组中的一个对象,也可以用来更新数据到视图

时间:2023-03-28 15:43:09 HTML

夜里的月亮,想着失踪的人说实话,每天真的跳回去了在百度、google、bing等各种搜索引擎之间来回折腾,要不我搜一下掘金,搜索一下思路,看看CSDN。我的前端是吃多了,每天不知道遇到多少问题,然后我身边的前端同学基本上都是我问的,基本上我问谁有空教我。前端的细节太多了。一旦遇到没有接触过的问题,就会很麻烦。如果有正在学习前端的后端小伙伴,我觉得熟悉前端最快的方法就是写整个项目。这可能是入门前端框架最快的方法。1.修改vue中数组对象下数组中的一个对象我的对象结构如下:upQuusetionBool:true,downQuestionBool:false,questions:[{id:'',name:'',isCheckbox:'',answer:'',conditions:[],dropdownMultiSelections:[]}]}]要实现的需求都是通过数组下标修改数组中的一个对象。一开始我的想法是把值一个一个赋值到数组里,和写Java代码是一样的思路。this.sections[index].question[id]=this.addQuestion这里的index和id是我们点击修改页面时传入的值。最后发现这个一直报错,无法修改。后来查了一下百度说:问题:数组中的对象不能根据数组的索引直接赋值修改。原因:Vue不允许在已创建的实例上动态添加新的根级响应式属性。但是可以使用Vue.set(object,key,value)方法给嵌套对象添加response属性,然后发现需要使用this.$set进行操作解决://array:the第一个参数是要修改的数组,第二个值是修改的下标或者字段,第三个是修改什么值this.$set(sections[index].question,id,{id:'123',name:'NingInspring',isCheckbox:true,answer:'testset',conditions:[1,2,3],dropdownMultiSelections:[a,b,c]});or//object:第一个参数是要修改的Object,第二个是修改属性字段的值,第三个是修改什么值Vue.set(sections[index].question,id,{id:'123',name:'宁在春',isCheckbox:true,answer:'testset',conditions:[1,2,3],dropdownMultiSelections:[a,b,c]})看到这个.$set方法,我想进一步了解它,看看它是否仍然适用于哪些应用场景,以便您下次需要时可以直接使用它。2、this.$set2.1和this.$set可以实现什么功能官方解释:给响应式对象添加一个属性,并保证新属性也是响应式的,并触发视图更新。一定要用来给响应式对象添加新的属性,因为Vue无法检测到普通的新属性(比如this.myObject.newProperty='hello,ningzaichun')简单的说:当你发现你添加了一个Attributes可以打印出来在控制台上,但未更新到视图。可能这时候就需要this.$set()方法了。2.2this.$set在this.$setVue//Array中的用法:第一个参数是要修改的数组,第二个值是要修改的下标或字段,第三个是修改什么值//Object:第一个参数是要修改的对象,第二个参数是修改属性字段,第三个是修改什么值Vue.set(target,propertyName/index,value)parameter{Object|数组}目标{字符串|number}propertyName/index{any}valuesmallcase:target:要变化的数据源(可以是对象或数组)key具体要变化的数据(index)valuereset赋值是在vue的生命周期钩子函数挂载的,我们手动给数组加一个值,但是页面视图中直接不更新初始化的页面是这样的。但是在控制台中,其实已经打印出来了,但是如果我们点击按钮的设置,视图会立即发生变化。这是this.$set的绝妙用法。2.3.this.$set应用场景1.我们在使用vue进行开发的时候,可能会遇到一种情况。vue实例生成后,我们可以再次给数据赋值或者添加数据,但是数据不能同步更新。.2.另外像我这样用this.$set来更新数据。我认为这只是纸上谈兵的一点点,我知道我必须自己做。大家好,我是博主宁在淳:一个热爱文艺却走上编程道路的首页青年。希望:当我们相遇时,我们将有所成就。