我將 prop 傳遞給子組件，并將 prop 值傳遞給 data() 變數。問題是，當我更改 data() 變數的值時，父級的值更改為，我不知道為什么。
所以我有一個v-for父級我呼叫該editar()方法
<tr v-for="(mensagem,key) in allMensagens" :key="key">
<td >{{mensagem.titulo}}</td>
<td >
<div >
<a role="button" v-on:click="editar(mensagem)" title="Editar Mensagem"></a>
</div>
</td>
</tr>
然后在編輯器上我有這個，其中mensagemEdit是data() variable父組件：
editar(mensagem)
{
this.mensagemEdit = mensagem;
this.toggleCriarMensagem("edit");
}
然后顯示要編輯的表格我有這樣的東西
<template v-if="criarMensagem">
<keep-alive>
<FormAddEditMensagem :mensagemEdit="mensagemEdit" :tipoMensagem="'E'" :acao="acao"/>
</keep-alive>
</template>
我將 mensagemEdit 發送給孩子的地方，然后在上面我有這行代碼，其中mensagem 是data()孩子的 var：
activated() {
this.mensagem = this.mensagemEdit;
},
問題在于，當我編輯 this.mensagem 上的值時，mensagemEdit來自父級的值假定值和來自 的 mensagemv-for采用該值，所以如果我關閉表單，更改 的值criarMensagem to false，我會得到未保存的值，但是編輯表上的值，我不想要那個。
uj5u.com熱心網友回復：
您可以使用以下方法克隆 prop 值：
- 如果值是簡單資料型別（字串、布林值、數字）：
this.mensagem = JSON.parse(JSON.stringify(this.mensagemEdit));
- 如果值是一個簡單的物件：
this.mensagem = Object.assign({}, this.mensagemEdit);
- 對于更復雜的值（物件陣列、嵌套物件），我建議使用 lodash：
import { cloneDeep } from "lodash"
this.mensagem = cloneDeep(this.mensagemEdit);
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/475549.html
上一篇：Vuejs顯示運行余額