我在Vue3中有以下代码:

    data: function(){
          
           return {
              testData:[],
           }
        },
    
       mounted() {
         
          var testObj = {
                name: 'aniket',
                lastname: 'mahadik'
            }

            for (let index = 0; index < 3; index++) {

                this.testData.push(testObj);
            }
       },

       methods: {

           updateLastName: function(key){

               this.testData[key].lastname = 'kirve';

           }

       }

当我调用updateLastName(1)方法只更新第二个元素的姓氏时,它更新了所有元素的lastname.

我试了几种方法,但都没有找到想要的结果.

有人能告诉我这里出了什么问题吗?

推荐答案

这是因为您正在推送对数组中相同对象的引用,因此当您更新数组中的任何项时,您实际上是在更新每个项,因为它引用了相同的对象.

通过克隆对象进行推送: testData.value.push({...testObj})

或者把定义放在推送中

testData.value.push({ name: 'aniket', lastname: 'mahadik' })

Is JavaScript a pass-by-reference or pass-by-value language?

Vue.js相关问答推荐

Nuxt3 Build . put文件夹保持空,没有从.nuxt复制任何内容

复选框列未在vutify中排序

更新 Shopware 管理 CMS 组件中的编辑器视图

如何以惯用的方式触发 vue3 中同级组件的效果?

Vuetify 复选框未正确显示值

作为props 传递的原始 ref 的 Vue 3 react 性

如何使用 vue.js 和 vue 路由实现当前路由的子菜单的子菜单

Vuex store 在 Nuxt 的什么地方

如何为使用 Vuex store的 Vue 表单组件编写 Jest 单元测试?

如何从 bootstrap-vue 模态监听事件?

JavaScript/VueJS:判断数组是否包含具有特定值元素的对象

Vuejs:我应该在 vue-router SPA 中的哪里放置一些常用的 js 工具?

Leaflet+Vue+Vuetify / Leaflet map 隐藏 vuetify 弹出对话框

如何让 Vue 在 shadow dom 中工作

beforeCreate 挂钩中的 Vue 2.1 调用方法不起作用

无法访问函数内的数据属性

是否有 v-cloak 逆?

vuex 是 state.array.push react式的吗?

如何从扩展面板(Vuetify)中删除阴影?

表格行上的 Vuejs 转换