vue 警告：无效的道具：道具 "modalState" 的类型检查失败。期望布尔值，得到函数

Question

我运行进入这个警告，但我不明白。我已经搜索过 Whosebug 并且有很多帖子，但它们各不相同，无法解决我的问题。我阅读了通用的，我认为我已经实施了上述解决方案。该警告仍显示在控制台中。这是我的组件：

<template>
<div>
    <p>Vakken</p><input id="plusButton" type="button" value="+" @click = "openAddSubject">
    <table>
        <th>
            <tr>
                <td>Afkorting</td>
                <td>Beschrijving</td>
                <td>Geblokt</td>
                <td>Kleur</td>
                <td></td>
            </tr>
        </th>
        <tbody>
            <tr v-for="subject in subjects" :key = "subject.abbr">
                <td>{{subject.abbr}}</td>
                <td>{{subject.desc}}</td>
                <td>{{subject.blocked}}</td>
                <td>{{subject.color}}</td>
            </tr>
        </tbody>
    </table>
    <add-subject :modal-state="addSubjectOpen" />
</div>

</template>

<script>
   import { mapGetters } from 'vuex'
   import AddSubject from './AddSubject.vue'


   export default {
    components: { AddSubject },
    name: "Subjects",

data(){
    return{
        addSubjectOpen:Boolean
    }
},

mounted(){
    this.addSubjectOpen = false
},

methods: {
  openAddSubject(){
    this.addSubjectOpen = true
  }
},


}
</script>

当按钮被点击时，addSubjectOpen 的值通过方法openAddSubject 被设置为true。然后将 modal-state 的属性设置为 true 并显示模态。 addSubjectopen 的类型是 Boolean。

这是AddSubject.Vue

的代码

 <template>
<div class="modal" :class="modalState?'is-active':''" >
<div class="modal-background"></div>
<div class="modal-card">
    <header class="modal-card-head">
    <p class="modal-card-title">Modal title</p>
    <button class="delete" aria-label="close"></button>
    </header>
    <section class="modal-card-body" id = "modal">
    <!-- Content ... -->
    Gewoon wat tekst
    </section>
    <footer class="modal-card-foot">
    <button class="button is-success">Opslaan</button>
    <button class="button">Annuleren</button>
    </footer>
</div>
</div>    
</template>

<script>
    import {mapGetters} from 'vuex'

    export default {
     name: 'AddSubject',

     props: {
        modalState:Boolean,
     },
}
</script>

同样，道具 modalState 的类型肯定设置为布尔值。那么为什么它作为函数传递呢？顺便说一句，组件按预期工作，只是控制台中的警告困扰我。

Answer 1

data() {
    return {
        addSubjectOpen: false // or true, depending on needs
    }
},

vue 警告：无效的道具：道具 "modalState" 的类型检查失败。期望布尔值，得到函数

vue warning: Invalid prop: type check failed for prop "modalState". Expected Boolean, got Function

laravel

vue.js

vue-component