Question

我有两个vue组件：

Comparator

和

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
        }
    }
})

当我点击事件名称时，模态显示正常，但是，当我尝试通过单击模态上的“X”来关闭事件时，它会发出“隐藏”并且事件下的hideModal方法正在运行，但是我的模态是熬夜。当我在尝试关闭它后控制日志'this.showModal'时，它显示为false，但是如果我在console.log'this'并查看showModal，我看它仍然等于true。

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

Answer 1

这里的问题是模态嵌入在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组件不更新函数数据

1 个答案: