데이터가 관련 소품 값으로 업데이트되지 않았습니다.

Question

vuejs를 사용하여 모달 창을 만들고 putton을 눌렀을 때 숨길 수 있습니다. 내가 가진

<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 파일 : index.html을 : 여기 몇 가지 코드

<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'데이터도 업데이트됩니다. 그러나 나는 단지 소품이 사실이되고 있음을 볼 수 있지만, 버튼을 누르면 isShown은 여전히 ​​거짓입니다. 이유를 설명해 주시겠습니까?

Answer 1

editdream.vue 내부에 isShown을 (를) data (으)로 정의했습니다.

data is set once prior to the creation of the component이므로 show-modal 버튼을 클릭하면 업데이트되지 않습니다. index.html. isShown은 단추가 클릭되기 전에 (해당되는 경우 false 일 때) 귀하의 소품 show이 생성시에 설정된 상태로 유지됩니다.

간단한 수정 isShowncomputed 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}; 
    } 
} 

계산 된 속성을 적극적으로 show 소품처럼, this의 데이터를보고, 그래서 show가하는 때마다 업데이트해야합니다.