Vuejs Modal。避免改變道具，nuxt.js iview

我需要modals的幫助，我試圖得到這個問題昨天排序，但後來變得更糟。所以請任何幫助，將不勝感激。我有一個父組件和有內我有一個模式（子組件）Vuejs Modal。避免改變道具，nuxt.js iview

在我父代碼：

<template> 
<div class="all"> 
    <Button type="primary" @click="modalUp()">Press me</Button> 
    <appTest @changed = "modal1 = $event" :modal1='modal1'> </appTest> 
    {{modal1}} 

</div> 
</template> 
<script> 
/* eslint-disable */ 
import test from '~components/test.vue' 


export default { 

    data(){ 
    return{ 
    modal1: false 
    } 
    }, 
    components: { 
    appTest: test 
    }, 
    methods: { 
    modalUp() { 
     this.modal1 = true 
    } 
    }, 
    watch:{ 
    modal1: function(){ 
     this.$on('changed', (data)=>{ 

     console.log(data) 
     }) 

    } 
    } 

} 

</script> 
<style lang="css" scoped> 


</style>

子組件（appTest）裏面我有這個

<template> 
<div id="" > 
    <Modal v-model="modal1" title="MODALLLL" @on-ok="ok" @on-cancel="cancel"> 
    <p>@twitter</p> 
    <p>@facebook</p> 
    <p>Good</p> 
    {{modal1}} 
    </Modal> 
</div> 
</template> 
<script> 
/* eslint-disable */ 
export default { 
    props: ['modal1'], 
    data() { 
    return { 
    } 
    }, 
    methods: { 
    ok() { 
     this.$Message.info('all good'); 

    }, 
    cancel() { 
     this.$Message.info('Cancel'); 
     this.$emit('changed') 
    } 
    }, 
    watch:{ 
    modal1: function(){ 
     this.$emit('changed', this.modal1) 
    } 
    } 

} 
</script> 
<style lang="css" scoped> 
</style>

所以這個代碼在一個方式，模態正確地顯示出來，但一旦它不見了，當我們回到父組件它給了我這個VUE警告避免變異PROP

我檢查了文檔和其他所有內容，但是vuejs文檔給出了2 + 2這樣的例子，這在這種情況下沒有幫助。我觀看了互聯網上的視頻等，但仍不知道如何以正確的方式完成。

什麼是最好的方式讓它工作？

我使用的是模態從iview

來源

2017-07-16 Stan

你真的在監視器中有'this.modal1 = console.log（data）'嗎？此外，不要在觀察器中設置事件處理程序，每次值更改時都要添加新的事件處理程序。 – Bert

ahw no :)我忘了刪除它，它的意思是假的，但無論如何它不以我需要的方式工作。所以，如果你有任何建議，請分享:) – Stan

我期望在子組件中的問題是'v-model =「modal1」'。我不知道'Modal'是什麼，但是'v-model'會嘗試改變邊界值，'modal1'是屬性。 – Bert

更改您的孩子使用計算值。

export default { 
    props: ['modal1'], 
    computed:{ 
    showModal:{ 
     get(){return this.modal1}, 
     set(v){ this.$emit("changed", v)} 
    } 
    }, 
}

而且更新子模板

<Modal v-model="showModal" ...></Modal>

這樣做，whever你父改變modal1，該值將在Modal組件更新，每當Modal成分的變化值，它將被髮送給父母。

來源

2017-07-16 18:59:56 Bert

Vuejs Modal。避免改變道具，nuxt.js iview

回答

相關問題