Vueのコンポーネントには、私は2つのVUEのコンポーネントを持っている機能

Question

上のデータを更新されませんモーダルの「X」をクリックすることでイベントが「非表示」になり、イベントのhideModalメソッドが実行されていますが、モーダルが上がっています。私はconsole.logを 'this.showModal'を閉じようとした後にfalseを表示していますが、console.log 'this'とshowModalを見ると、それはまだtrueです。

何が起こっている可能性がありますか？考え方は、showModalはfalseに設定され、モーダルコンポーネントに渡され、モーダルコンポーネントは閉じます。

Answer 1

ここでの問題は、モーダルがshowModel = trueを設定するクリックハンドラを持つspanの内部に埋め込まれていることです。したがって、モーダルを閉じるためにXをクリックすると、またスパンをクリックします。 showModalはfalseに設定され、次にはすぐにがtrueに設定されます。

モーダルを修正するには、モーダルをスパンの外側に移動します。

template: ` 
    <div> 
    <span class="pointer" @click="showModal = true"> 
     {{event.evname}} 
    </span> 
    <modal @hide='hideModal' :event="event" :showModal="showModal"> 
     <div slot="title">{{event.evname}}</div> 
     <div slot="content">{{event}}</div> 
    </modal> 
    </div> 
`,