我有两个 vue 组件:
Vue.component('event', {
props:['event'],
template: `
<span class="pointer" @click="showModal = true">
{{event.evname}}
<modal @hide='hideModal' :event="event" :showModal="showModal">
<div slot="title">{{event.evname}}</div>
<div slot="content">{{event}}</div>
</modal>
</span>`,
data: function(){
return{
showModal: false
}
},
methods: {
hideModal: function(){
this.showModal = false
}
}
})
和
Vue.component('modal', {
props:['event', 'showModal'],
template: `
<div v-if="showModal" class="modalBack">
<div class="container modalPopup">
<div class="row">
<span class="col-lg-11"><slot name="title"></slot></span><span class="pointer col-lg-1" @click="hide">X</span>
<slot name="content"></slot>
</div>
</div>
</div>`,
methods: {
hide: function(){
this.$emit('hide')
}
}
})
当我单击事件名称时,模式显示正常,但是,当我尝试通过单击模式上的“X”来关闭事件时,它会发出“隐藏”并且事件下的 hideModal 方法正在运行,但是我的模态正在熬夜。当我尝试关闭它后控制台日志“this.showModal”时,它显示 false,但是如果我控制台日志“this”并查看 showModal,我发现它仍然等于 true。
知道会发生什么吗?这个想法是 showModal 将被设置为 false,这将被传递到模态组件,并且模态组件将关闭。
最佳答案
这里的问题是模式嵌入在具有设置 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>
`,
关于javascript - Vue 组件不更新函数数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44233822/