Vue3 更新数据值也在更新 prop

Question

不知道这是否是正常行为，我是 Vue 的新手，但这让我抓狂。希望这里有人对正在发生的事情有任何线索...

这是我的出口：

props: [
    'asset', //--- asset.price = 50
],
data() {
    return {
        local_asset: this.asset
    }
}

然后，我用 v-model 更新 local_asset 值的值：

<input type="number" v-model="local_asset.price" @change="test" />

并且在用 100 填充输入时，它会导致道具资产也发生变化：

methods: {
    test() {
        console.log(this.local_asset.price)  //--- console >> 100
        console.log(this.asset.price)        //--- console >> 100
    }
}

我做错了吗？对不起，如果我的代码是胡说八道。请帮忙...

Answer 1

您需要复制值，而不是引用：

Vue.component('Child', {
  template: `
    <div class="">
      <input type="number" v-model="local_asset.price" />
      <div>data: {{ local_asset }}</div>
    </div>
  `,
  props: [
    'asset',
  ],
  data() {
    return {
      local_asset: {...this.asset}
    }
  },
})

new Vue({
  el: '#demo',
  data() {
    return {
      asset: {price: 50}
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <div>prop: {{ asset }}</div>
  <Child :asset="asset" />
</div>

Answer 2

如果您的数据是原始数据（String、Number、BigInt、Boolean、undefined 和 null），您可以使用

 data() {
       return {
       local_asset: JSON.parse(JSON.stringify(this.asset))
       }
    }

Vue3 更新数据值也在更新 prop

Vue3 updating data value is updating prop too

vue.js

vuejs3