鍍金池/ 問(wèn)答/HTML/ vue從列表中選擇一條數(shù)據(jù)，如何做到每次點(diǎn)擊修改彈框都顯示數(shù)據(jù)的本值，而不是上次

vue從列表中選擇一條數(shù)據(jù)，如何做到每次點(diǎn)擊修改彈框都顯示數(shù)據(jù)的本值，而不是上次編輯后沒(méi)保存的值

父組件將列表中選中的這個(gè)object給彈窗組件傳進(jìn)去；

彈窗組件內(nèi)代碼：

js:

props: ['object', 'visible'],
computed: {
  objectProp(){
      return Object.assign({}, this.object)
  }
},

html:

   el-input v-model=objectProp.name

只要我在外面不對(duì)選中的數(shù)據(jù)進(jìn)行切換，每次我打開(kāi)這個(gè)彈窗，顯示的都是我上次修改的值；

如果我選中一條數(shù)據(jù)，第一次打開(kāi)彈窗，顯示的是數(shù)據(jù)本值，
假如數(shù)據(jù)本值是1，
我修改為2,
然后我關(guān)閉彈窗，
不切換選中的數(shù)據(jù)，再打開(kāi)彈窗
此時(shí)顯示的數(shù)據(jù)是2，而不是1，是上一次修改的值，我想讓他顯示為數(shù)據(jù)本值1，該怎么辦

應(yīng)該如何解決比較優(yōu)雅呢，

目前我的解決方式是，將visible是否顯示彈窗變量作為條件，每次這個(gè)值改變objectProp都會(huì)重新賦值一次，
但是這樣的話，我打開(kāi)彈窗和關(guān)閉彈窗都會(huì)給這個(gè)objectProp重新賦值，完全沒(méi)有必要，代碼很丑陋

 objectProp(){
    if(!this.visible){
      return Object.assign({}, this.object)
    }else{
      return Object.assign({}, this.object)
    }
  },
回答
編輯回答
念舊

我的思路是，你子組件雙向綁定的那個(gè)值，不要直接用父組件傳給他的，彈窗打開(kāi)的時(shí)候，做一個(gè)動(dòng)作，就是聲明一個(gè)新的值，然后把父組件的值傳給他（需要深復(fù)制），然后你子組件就直接綁定新聲明的那個(gè)值；然后彈窗關(guān)閉的時(shí)候，如果是保存關(guān)閉，那就把你新聲明的那個(gè)值傳給父組件，讓父組件去更新這個(gè)值，就是vue的自定義事件，$emit和$on；如果是未保存關(guān)閉，那么久不用做任何其他操作，直接關(guān)閉子組件就好了。

2018年7月17日 22:09
編輯回答
玄鳥(niǎo)

點(diǎn)開(kāi)之后，復(fù)制一份數(shù)據(jù)，保存就提交回去，不然就丟掉。

// modal.vue
<template lang="pug">
input(v-model="localValue.someField")
</template>

<script>
export default {
  props: {
    value: null,
  },

  data() {
    return {
      localValue: null,
    };  
  },

  methods: {
    onSubmit() {
      this.value = this.localValue;
    },
  },

  beforeMount() {
    this.localValue = cloneDeep(this.value);
  },
}
</script>
2018年2月14日 19:01
編輯回答
赱丅呿

點(diǎn)開(kāi)彈窗的時(shí)候把父組件的值給給彈窗就好了，父組件的值始終是獲取服務(wù)器的值，不提交到服務(wù)器就不會(huì)改變

2017年1月7日 05:13