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

Posted 2023-02-23

【中文标题】vue 警告：无效的道具：道具“modalState”的类型检查失败。预期布尔值，得到函数

【英文标题】：vue warning: Invalid prop: type check failed for prop "modalState". Expected Boolean, got Function

【发布时间】：2021-11-07 01:09:09

【问题描述】：

我遇到了这个警告，但我不明白。我已经搜索过 *** 并且有很多帖子，但它们都是不同的，并不能解决我的问题。我读了this one 这是通用的，我想我已经实现了上述解决方案。警告仍然显示在控制台中。 这是我的组件：

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

单击按钮时，通过方法openAddSubject 将addSubjectOpen 的值设置为true。的 prop modal-state 设置为 true 并显示模态。 addSubjectopen 的类型是布尔型。

这是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 的类型绝对设置为布尔值。那么为什么它作为一个函数传递呢？顺便说一句，组件按预期工作，只是控制台中的警告让我感到困扰。

【参考方案1】：

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