數據不會更新accordint相關道具的價值

Question

我想使用vuejs有一個模式窗口，並將其隱藏在putton按下。 下面是一些代碼： 的index.html：

<table class="table"> 
    <tr v-for = "dream in dreams"> 
    ... 
    <th> 
    <button id="show-modal" @click="showModal = true">New Post</button> 
    </th> 
    </tr> 
</table> 
... 

<editdream v-bind:show.sync="showModal"></editdream> 

在editdream.vue文件我有：

<template> 
    <div v-show="isShown" transition="modal"> 
    ... 
    </div> 
</template> 

<script> 
    export default { 
    props: ['show'], 
    methods: { 

    close: function() { 
     this.isShown = false; 
    }, 

    savePost: function() { 
     this.close(); 
    } 
    }, 
    data: function() { 
    return { isShown: this.show } 
    } 
} 

我認爲，當我按下按鈕，然後 '秀'道具將更新爲模態窗口，相應的「isShown」數據也將被更新。但我只能看到道具變得真實，但按下按鈕時顯示仍然是錯誤的。你能解釋一下爲什麼？

Answer 1

在editdream.vue裏面，您已經在data下定義了isShown。

data is set once prior to the creation of the component，所以它不會更新當您點擊按鈕index.html。 isShown停留在任何您的道具show在創建時設置，在按鈕被點擊之前（可能是false）。

一個簡單的解決方法是讓isShown一個computed property：

<template> 
    <div v-show="isShown" transition="modal"> 
    ... 
    </div> 
</template> 

<script> 
export default { 
    props: ['show'], 
    methods: { 
    close: function() { 
     this.isShown = false; 
    }, 
    savePost: function() { 
     this.close(); 
    } 
    }, 
    computed: { 
    isShown: function() return {this.show}; 
    } 
} 

計算性能積極觀看this的數據，如show道具，所以每當show確實應該更新。