不知道這是否是正常行為，我對 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" />
在用 ie 100 填充輸入時，它也會導致道具資產也發生變化：
methods: {
test() {
console.log(this.local_asset.price) //--- console >> 100
console.log(this.asset.price) //--- console >> 100
}
}
我做錯了嗎？對不起，如果我的代碼是無稽之談。請幫忙...
uj5u.com熱心網友回復：
您需要復制 value ，而不是參考：
Vue.component('Child', {
template: `
<div >
<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>uj5u.com熱心網友回復：
如果您的資料是原始資料（字串、數字、BigInt、布林值、未定義和空值），您可以使用
data() {
return {
local_asset: JSON.parse(JSON.stringify(this.asset))
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/385864.html
上一篇：li元素的（使用CSS樣式）標記在Chrome瀏覽器上的位置錯誤，但在firefox上很好
下一篇：等待影像完成上傳以觸發代碼