vue:如何把后端传过来的数组的其中一个对象加入新的属性

加入我们是更改数组中的第一个对象,在vue中可以使用$set方法将属性插入到第一个对象中作为属性。

Script部分:

<script>export default {data() {return {boxes: [//模拟后端传过来的数组{id:1,name:'张三'},{id:2,name:'李四'},{id:3,name:'王五'},{id:4,name:'赵六'}],name:'土鸡'//新更改的属性};},created() {this.samsung();},methods:{samsung(){const obj = this.boxes[0]if(obj){this.$set(obj, 'name', this.name)}console.log('this.boxes',this.boxes)}},}
</script>

模拟后端获取的数据boxes,然后我们把新的name:土鸡,把boxes第一个对象的name属性‘张三’,跟换成土鸡。

我们直接通过索引0来获取boxes数组中的第一个对象,并将其赋值给变量obj。然后使用Vue提供的$set方法,将name属性插入该对象中,并赋值为土鸡。这样就实现了将属性name:土鸡插入到第一个对象中的操作。

允许结果如下:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/173882.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Linux】Centos7 shell实现MySQL5.7 tar 一键安装

&#x1f984; 个人主页——&#x1f390;个人主页 &#x1f390;✨&#x1f341; &#x1fa81;&#x1f341;&#x1fa81;&#x1f341;&#x1fa81;&#x1f341;&#x1fa81;&#x1f341; 感谢点赞和关注 &#xff0c;每天进步一点点&#xff01;加油&#xff01;&…

NFS服务器的搭建

架设一台NFS服务器&#xff0c;并按照以下要求配置 准备阶段&#xff1a;准备两台虚拟机&#xff0c;一台作为服务端&#xff0c;一台作为客户端 服务端&#xff08;Server&#xff09;&#xff1a;192.168.75.139 客户端&#xff08;Client&#xff09;:192.168.75.160 两…

Windows配置IP-SAN(iSCSI)

之前写了《Linux配置IP-SAN&#xff08;iSCSI&#xff09;》&#xff0c;现在简单记录Windows配置IP-SAN&#xff08;iSCSI&#xff09;&#xff0c;基本过程都是一样的。一些原理请参考《Linux配置IP-SAN&#xff08;iSCSI&#xff09;》&#xff0c;更详细一些。 目录 一、确…

开启学历新征程,电大搜题助您轻松获取知识

作为一名电大学者&#xff0c;有肩负着传递真实信息、宣传正面价值的使命&#xff0c;而今天我要向您介绍的是一款非常实用的学习工具——电大搜题微信公众号。通过该平台&#xff0c;您可以获得更多关于浙江开放大学和广播电视大学的学习资源&#xff0c;助您在学习和工作上取…

《未来之路:技术探索与梦想的追逐》

创作纪念日 日期&#xff1a;2023年07月05日文章标题&#xff1a;《从零开始-与大语言模型对话学技术-gradio篇&#xff08;1&#xff09;》成为创作者第128天 在这个平凡的一天&#xff0c;我撰写了自己的第一篇技术博客&#xff0c;题为《从零开始-与大语言模型对话学技术-…

【leetcode】8.字符串转换整数

题目 请你来实现一个 myAtoi(string s) 函数&#xff0c;使其能将字符串转换成一个 32 位有符号整数&#xff08;类似 C/C 中的 atoi 函数&#xff09;。 函数 myAtoi(string s) 的算法如下&#xff1a; 读入字符串并丢弃无用的前导空格 检查下一个字符&#xff08;假设还未…

【开源分享】国内可用的免费安卓GPT语音助手 - 可音量键唤起,可联网

写在前面&#xff1a;这是一个我写的开源GPT语音助手&#xff0c;不收钱&#xff0c;只求Star! 简要介绍 这是一个基于ChatGPT的安卓端语音助手&#xff0c;允许用户通过手机音量键从任意界面唤起并直接进行语音交流&#xff0c;用最快捷的方式询问并获取回复 使用效果 一、基…

Vue 小黑记事本组件版

渲染功能&#xff1a; 1.提供数据&#xff1a; 提供在公共的父组件 App.vue 2.通过父传子&#xff0c;将数据传递给TodoMain 3.利用 v-for渲染 添加功能&#xff1a; 1.收集表单数据 v-model 2.监听事件&#xff08;回车点击都要添加&#xff09; 3.子传父&#xff0c;讲…

Android拖放startDragAndDrop拖拽Glide灵活加载堆叠圆角图,Kotlin(6)

Android拖放startDragAndDrop拖拽Glide灵活加载堆叠圆角图&#xff0c;Kotlin&#xff08;6&#xff09; Android拖放startDragAndDrop拖拽Glide加载堆叠圆角图&#xff0c;Kotlin&#xff08;5&#xff09;-CSDN博客文章浏览阅读1.3k次。&#xfeff;&#xfeff;Android Dyna…

macOS Big Sur(macos11版本)

macOS Big Sur是苹果推出的最新操作系统&#xff0c;具有以下特点&#xff1a; 全新的设计风格&#xff1a;Big Sur采用了全新的设计语言&#xff0c;包括更加圆润的窗口和控件、更加鲜明的色彩和更加简洁的界面。这种设计风格使得操作系统更加美观和易用。强大的性能表现&…

Java 入门基础题

目录 1.输出一个整数的每一位 2.判定素数 3.求最大值方法的重载 4.输出闰年 5.打印 X 图形 6.数字9 出现的次数 7.计算分数的值 8. 模拟登陆 9.使用函数求最大值 10.斐波那契数列 星光不负赶路人&#xff0c;加油铁子们&#xff01;&#xff01;&#xff01; 1…

后端接口性能优化分析-问题发现问题定义

&#x1f44f;作者简介&#xff1a;大家好&#xff0c;我是爱吃芝士的土豆倪&#xff0c;24届校招生Java选手&#xff0c;很高兴认识大家&#x1f4d5;系列专栏&#xff1a;Spring源码、JUC源码&#x1f525;如果感觉博主的文章还不错的话&#xff0c;请&#x1f44d;三连支持&…