属性或方法 "isOpen" 未在实例上定义但在渲染期间被引用

Question

我对 vue.js 比较陌生。我正在尝试创建一个初始显示状态设置为 false 的模态对话框。此对话框在另一个组件中使用，如下所示。我不明白为什么 data 是 isOpen 是 undefined

// My main component here
<template>
 <button @click="openMyModal">Open</button>
 <MyDialog ref="dialog"/>
</template>
<script>
...
methods: {
 openMyModal(){
    this.$refs.dialog.open().then((confirm) => {
          console.log("confirm", confirm)
          return true
        }).catch();
 }
}
...
</script>

<template>
  <div class="overlay" v-if="isOpen">
    <div class="modal">
     <h1>My modal dialog here</h1>
    </div>
   </div>
 </div>
</template>
<script>
export default {
    name: 'my-dialog'
}
 data () {
      return {
        isOpen: false
        ...
      }
 }
 methods() {
  open() {
        this.isOpen = true;
        ...
      },
  close() {
        this.isOpen = false;
      },
}
</script>

Answer 1

主要是语法错误。这是调试代码后的示例：

在parent中：

methods: {
    openMyModal() {
      this.$refs.dialog.open();
    }
}

在child中：

export default {
  name: "my-dialog",
  data() {
    return {
      isOpen: false
    };
  },
  methods: {
    open() {
      this.isOpen = true;
    },
    close() {
      this.isOpen = false;
    }
  }
};

Answer 2

您的示例中缺少某些内容，因为根据您提供给我们的内容，它正在按预期工作：

Vue.component('MyDialog', {
  template: `
    <div>
      isOpen: {{ isOpen }}
      <div v-if="isOpen">
        <h1>My modal dialog here</h1>
      </div>
    </div>
  `,
  data () {
    return {
      isOpen: false
    }
  },
  methods: {
    open() {
      this.isOpen = true;
    },
    close() {
      this.isOpen = false;
    },
  }
})

Vue.config.productionTip = false

new Vue({
  el: '#app',
  template: `
    <div>
      <button @click="openMyModal">Open</button>
      <button @click="closeMyModal">Close</button>
      <MyDialog ref="dialog"/>
    </div>
  `,
  methods: {
    openMyModal(){
      this.$refs.dialog.open()
    },
    closeMyModal(){
      this.$refs.dialog.close()
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<body>
   <div id="app" />
</body>

属性或方法 "isOpen" 未在实例上定义但在渲染期间被引用

Property or method "isOpen" is not defined on the instance but referenced during render

modal-dialog

vue.js

vue-component

属性 或方法 "isOpen" 未在实例上定义但在渲染期间被引用

Property or method "isOpen" is not defined on the instance but referenced during render

modal-dialog

vue.js

vue-component

属性或方法 "isOpen" 未在实例上定义但在渲染期间被引用