Question

我这里有两个Vue组件，一切都写到页面上。唯一的问题是道具验证器。它似乎不是在查看数组并过滤掉其中包含数字且不等于四个项目的数组。它只是将所有内容打印到页面上。此代码有什么问题？感谢您提供的任何帮助！

我查阅了Vue文档和YouTube视频，但看来我已经完成了建议的工作。我正在追踪他们所拥有的东西，所以似乎我错过了一些东西，没有价值如何传递给道具？不确定。

这是HTML：

<div id="app">    
        <course :menu="menu1"></course>
        <course :menu="menu2"></course>
</div>

这是我拥有的VUE代码：

Vue.component("dish",{
    template: `
        <p>{{food}} &lt; - Delicious!</p>
    `,
    props:["food"]   
})

Vue.component("course",{
    template:  `
        <section class="course">
            <dish v-for="f in menu" :food="f"></dish>
        </section>
    `,
    props: {
        menu:{
            type:String,
            required:true,
            validator(foodArray){
                return foodArray.every(food=>typeof food === "string") && foodArray.length === 4  
                //PROBLEM SEEMS TO BE RIGHT HERE ABOVE THIS ISN'T VALIDATING
            }
        }
    }
})
new Vue({
    el:"#app",
    data:{
        menu1:["apple","pear","lemon",22],
        menu2:["hamburger", "fries", "shake", "soda","poop"]
    }
})

为什么Vue自定义和非自定义prop验证程序不起作用？

0 个答案: