Javascript Vue Js-产品过滤器查询

我使用前面答案中的代码创建多字段搜索查询以过滤结果。我的例子是可行的，但我正在尝试将复选框过滤器转换为选择字段。结果令我困惑。作为复选框，查询将搜索数组中的确切单词，在本例中为大小。如果我将此字段转换为select字段，则项过滤器使用通配符，因此L只会查找XL和小的结果。该复选框运行完全匹配。我有一个返回值的控制台日志，结果与输入一致

我试图理解为什么我的结果是不同的，只考虑输入风格的变化。得到的任何帮助都是巨大的

HTML:

尺寸：L:XL:

选择一个选项
L
特大号
小的

Vue JS

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                colors: [],
                sizes: [],
                //sizes: " ",
                products: [{
                    name: 'test1',
                    color: 'red',
                    size: 'XL'
                },  {
                    name: 'test3',
                    color: 'red',
                    size: 'L'
                }, {
                    name: 'test4',
                    color: 'black',
                    size: 'XL'
                },  {
                    name: 'test6',
                    color: 'yellow',
                    size: 'SMALL'
                }, {
                    name: 'test7',
                    color: 'black',
                    size: 'L'
                }],
                sortBy: 'name',
                keyword: ''
            }
        },
        computed: {
            computedProducts: function() {
                return this.products.filter((item) => {
                    return (this.keyword.length === 0 || item.name.includes(this.keyword)) &&
                        (this.colors.length === 0 || this.colors.includes(item.color)) &&
                        (this.sizes.length === 0 || this.sizes.includes(item.size))
                }).sort((a, b) => {
                    return a[this.sortBy].toString().localeCompare(b[this.sortBy].toString())
                })
            }
        },
        methods: {
            gettext(event) {
                console.log(event.target.value);
            }
        }
    })
</script>

新Vue({
el:“#应用程序”，
数据（）{
返回{
颜色：[]，
尺寸：[]，
//尺寸：“，
产品：[{
名称：“test1”，
颜色：“红色”，
尺码：“XL”
},  {
名称：“test3”，
颜色：“红色”，
尺码：“L”
}, {
名称：“test4”，
颜色：'黑色'，
尺码：“XL”
},  {
名称：“test6”，
颜色：'黄色'，
尺寸：“小”
}, {
名称：“test7”，
颜色：'黑色'，
尺码：“L”
}],
sortBy:“name”，
关键字：“”
}
},
计算：{
computedProducts:函数（）{
返回此.products.filter（（项目）=>{
return（this.keyword.length==0 | | item.name.includes（this.keyword））&&
（this.colors.length==0 | | this.colors.includes（item.color））&&
（this.size.length==0 | | this.size.includes（item.size））
}).排序（（a，b）=>{
返回a[this.sortBy].toString（）.localeCompare（b[this.sortBy].toString（））
})
}
},
方法：{
gettext（事件）{
日志（event.target.value）；
}
}
})

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                colors: [],
                sizes: [],
                //sizes: " ",
                products: [{
                    name: 'test1',
                    color: 'red',
                    size: 'XL'
                },  {
                    name: 'test3',
                    color: 'red',
                    size: 'L'
                }, {
                    name: 'test4',
                    color: 'black',
                    size: 'XL'
                },  {
                    name: 'test6',
                    color: 'yellow',
                    size: 'SMALL'
                }, {
                    name: 'test7',
                    color: 'black',
                    size: 'L'
                }],
                sortBy: 'name',
                keyword: ''
            }
        },
        computed: {
            computedProducts: function() {
                return this.products.filter((item) => {
                    return (this.keyword.length === 0 || item.name.includes(this.keyword)) &&
                        (this.colors.length === 0 || this.colors.includes(item.color)) &&
                        (this.sizes.length === 0 || this.sizes.includes(item.size))
                }).sort((a, b) => {
                    return a[this.sortBy].toString().localeCompare(b[this.sortBy].toString())
                })
            }
        },
        methods: {
            gettext(event) {
                console.log(event.target.value);
            }
        }
    })
</script>