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

问题描述

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

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

标签： laravelvue.jsvue-component

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

问题描述

解决方案

推荐阅读