Javascript 默认情况下，Vue搜索筛选显示所有项目

我的vue应用程序有问题，我希望能够在其中搜索我的项目。问题是，它们在默认情况下不会显示，只有在进行搜索时才会显示

从“./firebase/firebaseInit”导入数据库；
导出默认值{
元信息：{
标题：“Udvalget af Urreme”，
元：[
{
名称：“说明”，
内容：
“Lukrative Urreme i læder，爬行动物og mange andre eksotiske打字机，直到劳力士、欧米茄、IWC og mange andre mærker。”
}
]
},
数据（）{
返回{
标题：“Udvalget af Urreme”，
加载：false，
搜索项目：[]，
搜索：空，
选择：空，
肩带：[]，
莫代尔：错，
排序：“，
分拣机：[
{标题：“Nyeste”，值：“最新”}，
{标题：“Pris stigende”，价值：“pricesc”}，
{标题：“Pris faldende”，价值：“pricedesc”}
]
};
},
过滤器：{
大写：函数（值）{
如果（！value）返回“”；
value=value.toString（）；
返回值.charAt（0.toUpperCase（）+值.slice（1）；
}
},
观察：{
搜索（val）{
val&&val！==this.select&&this.querySelections（val）；
}
},
创建（）{
这个.getStraps（）；
},
计算：{
filteredStraps（）{
var strips=this.searchItems.filter（strip=>{
如果（！this.search）返回this.searchItems；
返回(
strap.title.toLowerCase（）.includes（this.search.toLowerCase（））||
strap.skin.toLowerCase（）.includes（this.search.toLowerCase（））
);
});
if（this.sort==“最新”）{
返回.排序（（a，b）=>新日期（a.Date）-新日期（b.Date））；
}
if（this.sort==“priceasc”）{
返回条带。排序（（a，b）=>a.price>b.price）；
}
if（this.sort==“pricedesc”）{
返回条带。排序（（a，b）=>a.price{
this.searchItems=this.Strips.filter（e=>{
返回(
（e.title | |“”）.toLowerCase（）.indexOf（（v | |“”）.toLowerCase（））>-1
);
});
这一点：加载=错误；
}, 500);
},
getStraps（）{
db.收集（“皮带”）
.get（）
.然后（querySnapshot=>{
常数带=[]；
querySnapshot.forEach（doc=>{
常数数据={
id:doc.id，
标题：
医生
.data（）
.title.charAt（0）
.toUpperCase（）+doc.data（）.title.slice（1），
价格：单据数据（）价格，
皮肤：doc.data（）.skin，
类型：doc.data（）.type，
imgs:doc.data（）.imgs[0].url，
颜色：doc.data（）.colors，
日期：doc
.data（）
.date.toString（）
.切片（0,15）
};
推送（数据）；
});
这条带子=带子；
});
}
}
};

{{data.item.title}
{{strip.title}大写}
{{strap.price}}kr
这是我最喜欢的地方。。。

使用computed选项修复了这一问题，该选项查看搜索模型是否为空，如果未应用任何内容，则返回默认的straps数组

  computed: {
filteredStraps() {
  var straps = this.straps;

  if (this.search !== null) {
    var straps = this.searchItems.filter(strap => {
      if (!this.search) return this.searchItems;
      return (
        strap.title.toLowerCase().includes(this.search.toLowerCase()) ||
        strap.skin.toLowerCase().includes(this.search.toLowerCase()) ||
        strap.type.toLowerCase().includes(this.search.toLowerCase())
      );
    });
  }

  if (this.sort == "newest") {
    return straps.sort((a, b) => new Date(a.date) - new Date(b.date));
  }
  if (this.sort == "priceasc") {
    return straps.sort((a, b) => a.price > b.price);
  }
  if (this.sort == "pricedesc") {
    return straps.sort((a, b) => a.price < b.price);
  } else {
    return straps;
  }
}

计算：{
filteredStraps（）{
var Strips=此.Strips；
if（this.search！==null）{
var strips=this.searchItems.filter（strip=>{
如果（！this.search）返回this.searchItems；
返回(
strap.title.toLowerCase（）.includes（this.search.toLowerCase（））||
strap.skin.toLowerCase（）.includes（this.search.toLowerCase（））||
strap.type.toLowerCase（）.includes（this.search.toLowerCase（））
);
});
}
if（this.sort==“最新”）{
返回.排序（（a，b）=>新日期（a.Date）-新日期（b.Date））；
}
if（this.sort==“priceasc”）{
返回条带。排序（（a，b）=>a.price>b.price）；
}
if（this.sort==“pricedesc”）{
返回条带。排序（（a，b）=>a.price

---

}，

您的

v-for

基于一个计算数组，当搜索处于非活动状态时返回[]，因此很明显，为什么它不起作用？关于如何在默认情况下显示我的项目，您有什么想法吗？