1
嘗試關閉我的模態時遇到了奇怪的行爲。我寫的方法來顯示和關閉模式無法關閉VueJS2中的模態
methods: {
showModal: function() {
this.show = true;
console.log(this.show);
},
closeModal: function() {
this.show = false;
console.log(this.show);
},
莫代爾應通過點擊表
<tr class="hover-hand" @click="showModal">
<div v-show="show" class="modal is-active">
我試圖用一個單獨的組件來呈現它的行出現，但暫時把一切都在一個如果我試圖打開一個模式一切都是好的截圖模式https://pp.userapi.com/c638017/v638017273/39134/98lcFy5OWvc.jpg
但是，如果我試圖關閉我有一些麻煩的截圖與控制檯輸出它記錄console.log（this.show）;兩次用不同的參數。此外，模態不會關閉。 https://pp.userapi.com/c638017/v638017273/39148/mIpSQMQYLNg.jpg
對不起，我不知道如何在創建的jsfiddle項目的簡化版本，在這裏粘貼整個組件代碼
<template>
<tr class="hover-hand" @click="showModal">
<td>{{ beer.name }}</td>
<td>{{ beer.home }}</td>
<td>{{ beer.sort }}</td>
<td>{{ beer.density }}</td>
<td>{{ beer.alcohol_content }}</td>
<td>{{ beer.ibu }}</td>
<td>
<span class="icon">
<i v-if="beer.on_tap === true" v-bind:style="{ color: activeColor }" class="fa fa-check" aria-hidden="true"></i>
</span>
</td>
<div v-show="show" class="modal is-active">
<div class="modal-background"></div>
<div class="modal-content">
<div class="card">
<div class="card-content">
<p class="title">
{{ beer.name }}
</p>
<p class="subtitle">
Jeff Atwood
</p>
</div>
<footer class="card-footer">
<p class="card-footer-item">
<span>
View on <a href="https://twitter.com/codinghorror/status/506010907021828096">Twitter</a>
</span>
</p>
<p class="card-footer-item">
<span>
Share on <a href="#">Facebook</a>
</span>
</p>
</footer>
</div>
</div>
<button class="modal-close" @click="closeModal"></button>
</div>
</tr>
</template>
<script>
import SingleBeerModal from '@/components/Beerlist/SingleBeerModal';
export default {
name: 'SingleBeer',
data() {
return {
activeColor: 'green',
show: false,
};
},
methods: {
showModal: function() {
this.show = true;
console.log(this.show);
},
closeModal: function() {
this.show = false;
console.log(this.show);
},
},
components: {
'beer-modal': SingleBeerModal,
},
props: ['beer'],
};
</script>
<style>
</style>謝謝！
你嘗試'V系列：click.prevent =「closeModal」'？ – Pradeepb
我想你試圖以標準的方式將組件放置到表中... https：//vuejs.org/v2/guide/components.html#DOM-Template-Parsing-Caveats –
@Pradeepb是的，它沒有影響 –