Question

我在vue.js中关闭模板中的模态时遇到问题

这是我的代码：

var something = new Vue({
    el: "#something",
    data: {
        showModal: false
    }
});

Vue.component("mymodal",
{
    template: `
      <button class="button" @click="showModal=false">Cancel</button>
    `
});

export default something;

这是我的HTML

<div id="something">
        <mymodal v-show="showModal"></mymodal>
        <button @click="showModal = true" class="button is-info">Open Modal</button>
</div>

基本上，我的开放模式运作正常。只是在我的.js文件中触发模板内部的关闭模式，我有一个错误说明，

财产或方法＆＃34; showModal＆＃34;没有在实例上定义但是在渲染期间引用。确保此属性具有反应性，无论是在数据选项中，还是在基于类的组件中初始化财产。

Answer 1

试试这个：

var something = new Vue({
    el: "#something",
    data: {
        showModal: false
    }
});

Vue.component("mymodal",
{
    template: `
      <button class="button" @click="closeModal()">Cancel</button>
    `,
    methods : {
        closeModal() {
            this.$emit('closeModal');
        }
    }
});

export default something;

在你的HTML中：

<div id="something">
        <mymodal v-show="showModal" v-on:close-modal="showModal = false"></mymodal>
        <button @click="showModal = true" class="button is-info">Open Modal</button>
</div>

财产或方法＆＃34;名称＆＃34;未在实例上定义，但在呈现期间引用

1 个答案: