Vue 组件不更新功能数据

Question

我有两个 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' 关闭事件时，它发出 'hide' 和 hideModal 方法下事件是运行，但我的模式正在熬夜。当我在尝试关闭它后控制日志 'this.showModal' 时，它显示 false，但是如果我 console.log 'this' 并查看 showModal，我发现它仍然等于 true。

知道会发生什么吗？想法是将 showModal 设置为 false，这将传递给模态组件，然后模态组件将关闭。

Answer 1

您的问题是模态框嵌入在 span 中，该 span 具有设置 showModel = true 的点击处理程序。因此，当您单击 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>
`,

Vue 组件不更新功能数据

Vue Component Not Updating Data on Function

javascript

vue.js

vue-component

vuejs2