Почему над этим не работают пользовательские и нестандартные валидаторы Vue? - PullRequest
Новая
       22

Почему над этим не работают пользовательские и нестандартные валидаторы Vue?

0 голосов
/ 17 мая 2019

У меня здесь есть два компонента 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"]
    }
})
...