为什么当值为 false(它是布尔值)时我无法传递过滤后的数据

Question

我尝试使用 vuetify 过滤我的数据表，当我尝试使用 v-select 值 true(布尔数据类型(过滤时，它的工作原理是完成：隐藏/过滤假值。

但是当我尝试过滤假值时，真值仍然存在。因此，表值显示两个数据都包含 done： true 和 done： false

这是我的代码：

<template>
<div>
<v-card md12>
<v-card-actions class="justify-center">
</v-card-actions>
<v-card-title>
Nutrition
<v-spacer></v-spacer>
<v-select 
label="Status" 
:items="[false,true]"
v-model='dessertsStatus'
></v-select>
<!-- <v-checkbox 
v-model="dessertsStatus" 
class="mx-2" 
label="Status">
</v-checkbox> -->
<v-spacer></v-spacer>
<v-text-field
v-model="search"
append-icon="search"
label="Search"
single-line
hide-details
></v-text-field>
</v-card-title>
<v-data-table
:headers="headers"
:items="filteredItems"
:search="search"
show-expand
item-key="name"
>
<template #expanded-item="{headers,item}">
<td :colspan="headers.length">
{{item.name}}
{{item.calories}}
</td>
</template>
<template v-slot:item.action="{ item }">
<v-icon
color="green"
medium
@click="deleteItem(item)"
>
check_circle
</v-icon>
</template>
</v-data-table>
</v-card>
</div>
</template>
<script>
export default {
logout() 
{
this.$router.push("/login")
},
data () {
return {
search: '',
headers: [
{
text: 'Dessert (100g serving)',
align: 'left',
sortable: false,
value: 'name',
},
{ text: 'Calories', value: 'calories' },
{ text: 'Fat (g)', value: 'fat' },
{ text: 'Carbs (g)', value: 'carbs' },
{ text: 'Protein (g)', value: 'protein' },
{ text: 'Iron (%)', value: 'iron' },
{ text: 'Actions', value: 'action', sortable: false },
// { text: 'Status Done', value: 'done' },
],
desserts: [
{
name: 'Frozen Yogurt',
calories: 159,
fat: 6.0,
carbs: 24,
protein: 4.0,
iron: '1%',
done: true,
},
{
name: 'Ice cream sandwich',
calories: 237,
fat: 9.0,
carbs: 37,
protein: 4.3,
iron: '1%',
done: false,
},
{
name: 'Eclair',
calories: 262,
fat: 16.0,
carbs: 23,
protein: 6.0,
iron: '7%',
done: false,
},
{
name: 'Cupcake',
calories: 305,
fat: 3.7,
carbs: 67,
protein: 4.3,
iron: '8%',
done: true,
},
{
name: 'Gingerbread',
calories: 356,
fat: 16.0,
carbs: 49,
protein: 3.9,
iron: '16%',
done: false,
},
{
name: 'Jelly bean',
calories: 375,
fat: 0.0,
carbs: 94,
protein: 0.0,
iron: '0%',
done: true,
},
{
name: 'Lollipop',
calories: 392,
fat: 0.2,
carbs: 98,
protein: 0,
iron: '2%',
done: false,
},
{
name: 'Honeycomb',
calories: 408,
fat: 3.2,
carbs: 87,
protein: 6.5,
iron: '45%',
done: false,
},
{
name: 'Donut',
calories: 452,
fat: 25.0,
carbs: 51,
protein: 4.9,
iron: '22%',
done: false,
},
{
name: 'KitKat',
calories: 518,
fat: 26.0,
carbs: 65,
protein: 7,
iron: '6%',
done: true,
},
],
dessertsStatus: '',
}
},
computed: {
filteredItems() {
return this.desserts.filter((i) => 
{
return !this.dessertsStatus || (i.done == this.dessertsStatus);
})
}
},
};
</script>

我的计算代码有问题吗？或者它与javascript上的虚假值有关吗？

Answer 1

我认为你的问题就在这里：

return !this.dessertsStatus || (i.done == this.dessertsStatus)

当this.dessertsStatusfalse它不会到达第二部分时，它会因为第一部分而返回true。

相反，你想要这样的东西，第一个条件更明确地针对空值：

return this.dessertsStatus === '' || (i.done === this.dessertsStatus)

我也把==改成了===.这里应该无所谓，但允许胁迫是自找麻烦。

就个人而言，我会使用undefined或null而不是空字符串作为默认值''但我在上面的代码中将其保留为''以匹配您的data中的内容。