Javascript Vue监视方法未筛选对象

过滤器选项在Vue监视功能中似乎不起作用。下面的命令应该删除E:对象，但它不会删除任何内容。我已确认过滤器代码正在执行，对E:对象返回

false

，对其他所有对象返回

true

（预期）。但是，该项仍保留在数组中

通过prop传递到组件的对象：

[
    {
        "fs": "C:",
        "type": "NTFS",
        "size": 273649844224,
        "used": 265129050112,
        "use": 96.88624192856284,
        "mount": "C:"
    },
    {
        "fs": "D:",
        "type": "NTFS",
        "size": 1000202039296,
        "used": 879919800320,
        "use": 87.97420578539696,
        "mount": "D:"
    },
    {
        "fs": "E:",
        "type": "NTFS",
        "size": 524283904,
        "used": 35745792,
        "use": 6.818022015796998,
        "mount": "E:"
    },
    {
        "fs": "F:",
        "type": "NTFS",
        "size": 250058108928,
        "used": 193818132480,
        "use": 77.50923707729336,
        "mount": "F:"
    },
    {
        "fs": "G:",
        "type": "NTFS",
        "size": 249464614912,
        "used": 149687517184,
        "use": 60.00350680468374,
        "mount": "G:"
    }
]

组件脚本：

导出默认值{
名称：“磁盘”，
道具：[“diskinfo”]，
观察：{
diskinfo:函数（）{
if（typeof this.diskinfo！=“未定义”）{
//转换为GB
this.diskinfo.forEach（（磁盘）=>{
disk.used=（disk.used/1073741824）.toFixed（0）；
disk.size=（disk.size/1073741824）.toFixed（0）；
});
//如果<1 gb，则删除
此.diskinfo.filter（（disk）=>disk.size==“0”）；//过滤器返回一个新的：

a = [1,2,3]

a.filter((b) => b < 2) // return [1] but a is still [1,2,3]

您不应该修改道具值。这是Vue反模式
是决定保留什么，而不是保留什么。因此，如果要删除
size==0
的元素，应使用
size>0
比较
您没有使用返回值
Array.prototype.filter（）
执行任何操作，因此当然不会保留任何更改
我不知道您在这个组件中使用
diskinfo
道具做什么，但是处理类似的事情的典型方法是使用计算属性

导出默认值{
名称：“磁盘”，
道具：{diskinfo:Array}，
计算：{
格式化的DiskInfo（）{
返回此.diskinfo.map（di=>({
…迪，
使用：（di.used/1073741824）。固定（0），
尺寸：（di.size/1073741824）.固定（0）
})).filter（（{size}）=>size>0）
}
}
}

在模板中，您将使用
formattedDiskInfo
数组，而不是
diskinfo
道具。
正如Phill和Cyrbuzz所说，
filter
函数返回过滤后的数组，因此您必须更改：

this.diskinfo.filter((disk) => disk.size === "0");

为此：

this.diskinfo = this.diskinfo.filter((disk) => disk.size === "0");

我想你需要查找的定义。请特别注意返回值……简单的疏忽。谢谢。现在我想我有一个无限循环，因为我正在更改道具，这会再次触发我的watch方法，但我可以单独查看。再次感谢。这与@Cyrbuzz的答案（你已经引用）有什么不同？这没什么不同。我只是想强调@Cyrbuzz的答案是正确的，他的答案不应该被否决。那么你应该简单地投一票，而不是写一个重复的答案。哦，我忘了diskinfo是一个道具。我认为这个问题的更好解决方案也是使用计算，我们可以做得更好。如果他通过了带有
.sync
的prop可以这样写
computed:{diskinfo:{get（）{return this.diskinfo}，set（val）{this.$emit（'update:diskinfo'，val.filter（（disk）=>disk.size==“0”）}
@Cyrbuzz取决于OP对它做了什么。我感觉这只是为了显示，在这种情况下，不需要设置任何更改permanently@Phil是正确的，这仅用于显示目的。工作完美。学到了很多东西（Vue新手，不像其他语言那样精通JS）.谢谢你们两位。@Ned如果你对我为什么称之为反模式感兴趣，请阅读这部分文档~
this.diskinfo = this.diskinfo.filter((disk) => disk.size === "0");