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

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

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

js:

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

html:

   el-input v-model=objectProp.name

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

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

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

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

 objectProp(){
    if(!this.visible){
      return Object.assign({}, this.object)
    }else{
      return Object.assign({}, this.object)
    }
  },

回答

編輯回答

念舊

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

2018年7月17日 22:09

編輯回答

玄鳥

點開之后，復(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

編輯回答