Vue如何将数组复制到本地进行编辑？为啥它适用于字符串而不适用于数组？ [复制]

Posted 2023-02-23

【中文标题】Vue如何将数组复制到本地进行编辑？为啥它适用于字符串而不适用于数组？ [复制]

【英文标题】：Vue how to copy array locally for editing? Why does it work for strings and not arrays? [duplicate]Vue如何将数组复制到本地进行编辑？为什么它适用于字符串而不适用于数组？ [复制]

【发布时间】：2021-01-07 00:13:06

【问题描述】：

我做了一个演示来测试我的大型项目的问题，我正在制作一个设置菜单，我想在其中复制一些道具，编辑它们并保存它们。为此，我需要复制道具以供本地使用。出于某种原因，数组不会正确复制，并且 $set 将更改父函数的数组。见下文。

下面的子代码

<script>
export default 
  name: "HelloWorld",
  props: 
    data: Object,
  ,
  data: function()
    return
    localData : 
    
  ,
  mounted()
    this.localData = Object.assign(,this.data)
  ,
  methods: 
    changeData() 
      console.log("changing parent data");
      console.log(this.localData)
      this.localData.name = "new name"
      this.$set(this.localData.array, 0, 1000); //change first indes to 1000
    ,
  ,
;
</script>

<template>
  <div class="child">
    Child localData
    <br />
    <button @click="changeData()">Change Data</button>
  </div>
</template>

父代码

<template>
  <div id="app">
    <img  src="./assets/logo.png">
    <p>Parent data</p>
    <Child :data="data"/>
  </div>
</template>

<script>
import Child from './components/HelloWorld.vue'
export default 
  name: 'App',
  components: 
    Child
  ,
  data: function()
    return 
    data:  'name':'hello world','array':[1,2,3,4]
    
  

</script>

如图所示，按下按钮后，名称值仍然是对象的子副本的本地值，但数组不是。如何在不改变父级的情况下在本地更改数组。谢谢

【参考方案1】：

尝试使用扩展运算符：

 this.localData = ...this.data