Javascript 为什么当值为false(为布尔值)时无法传递过滤数据
我尝试使用vuetify过滤我的数据表,当我尝试使用v-select value true(布尔数据类型)过滤时,它工作正常:false值被隐藏/过滤 但当我试图过滤假值时,真值仍然存在。因此,表值显示两个数据都包含done:true和done:false 这是我的密码:Javascript 为什么当值为false(为布尔值)时无法传递过滤数据,javascript,node.js,vue.js,vuetify.js,computed-properties,Javascript,Node.js,Vue.js,Vuetify.js,Computed Properties,我尝试使用vuetify过滤我的数据表,当我尝试使用v-select value true(布尔数据类型)过滤时,它工作正常:false值被隐藏/过滤 但当我试图过滤假值时,真值仍然存在。因此,表值显示两个数据都包含done:true和done:false 这是我的密码: <template> <div> <v-card md12> <v-card-actions class="justify-center"> <
<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>
营养
{{item.name}
{{item.carries}
检查圆
导出默认值{
注销()
{
这是。$router.push(“/login”)
},
数据(){
返回{
搜索:“”,
标题:[
{
文字:“甜点(100克),
对齐:“左”,
可排序:false,
值:“名称”,
},
{文本:'卡路里',值:'卡路里'},
{text:'Fat(g'),value:'Fat'},
{text:'Carbs(g)',value:'Carbs'},
{text:'Protein(g'),value:'Protein'},
{文本:'Iron(%)',值:'Iron'},
{text:'Actions',value:'action',sortable:false},
//{文本:'状态完成',值:'完成'},
],
甜点:[
{
名称:“冷冻酸奶”,
卡路里:159,
脂肪:6.0,
碳水化合物:24,
蛋白质:4.0,
铁:1%,
是的,
},
{
名称:“冰淇淋三明治”,
卡路里:237,
fat:9.0,
碳水化合物:37,
蛋白质:4.3,
铁:1%,
完成:错误,
},
{
名称:“Eclair”,
卡路里:262,
脂肪:16.0,
碳水化合物:23,
蛋白质:6.0,
铁:7%,
完成:错误,
},
{
名字:“纸杯蛋糕”,
卡路里:305,
脂肪:3.7,
碳水化合物:67,
蛋白质:4.3,
铁:8%,
是的,
},
{
名称:“姜饼”,
卡路里:356,
脂肪:16.0,
碳水化合物:49,
蛋白质:3.9,
铁:16%,
完成:错误,
},
{
名称:“果冻豆”,
卡路里:375,
脂肪:0.0,
碳水化合物:94,
蛋白质:0.0,
铁:0%,
是的,
},
{
名称:“棒棒糖”,
卡路里:392,
脂肪:0.2,
碳水化合物:98,
蛋白质:0,
铁:“2%”,
完成:错误,
},
{
名称:“蜂巢”,
卡路里:408,
fat:3.2,
碳水化合物:87,
蛋白质:6.5,
铁:45%,
完成:错误,
},
{
名称:“甜甜圈”,
卡路里:452,
脂肪:25.0,
碳水化合物:51,
蛋白质:4.9,
铁:22%,
完成:错误,
},
{
名称:“KitKat”,
卡路里:518,
脂肪:26.0,
碳水化合物:65,
蛋白质:7,
铁:6%,
是的,
},
],
甜点状态:'',
}
},
计算:{
filteredItems(){
返回此.deserts.filter((i)=>
{
return!this.dessertstatus | |(i.done==this.dessertstatus);
})
}
},
};
我的计算代码有问题吗?或者它与javascript上的错误值有关?我认为您的问题在于:
返回!this.dessertstatus | |(i.done==this.dessertstatus)
当this.dessertstatus
为false
时,由于第一部分的原因,它将返回true
相反,您需要这样的内容,第一个条件更明确地针对空值:
返回this.dessertstatus==''| |(i.done===this.dessertstatus)
我还将==
更改为==
。这不重要,但允许胁迫是自找麻烦
就我个人而言,我会使用undefined
或null
代替默认值'
的空字符串,但我在上面的代码中将其保留为'
,以匹配数据中的内容