Javascript Vue.js-仅显示假数组元素

如果在我的vue.js中有如下代码，单击按钮时，我如何仅显示我单击的数组项（例如，Donnie）并隐藏其余的所有内容？（Joanne，Peter e.t.c），然后再次单击唯一显示的元素时，是否再次显示所有其他数组元素

const app = new Vue({
  el: '#app',
  data: {
    keyword: '',
    friends: [
      {
      name: "Donnie",
      age: "20"
    },
    {
        name: "Joanne",
        age:"19",
     },
      {
      name: "David",
      age: "26"
    },
      {
      name: "Peter",
      age: "23"
    },
      {
      name: "John",
      age: "29"
    },
      {
      name: "Jason",
      age: "19"
    },
     ],
  },
  computed: {
    filteredList() {
      return this.friends.filter((friend) => {
        return friend.name.toLowerCase().includes(this.keyword) + friend.age.includes(this.keyword) + friend.name.includes(this.keyword);
      });

      }
    },

  methods:{
      exclude(friend) {
        console.log(!friend.name);
    },
  }

  })

HTML

{{friend.name}-{{friend.age}

如果单击了某个项目，您应该能够将身份检查添加到筛选表达式中

首先添加一个属性来存储单击的好友。我会叫我的

然后在

排除方法中

exclude (friend) {
  this.selected = this.selected ? null : friend
}

现在，您的computed属性可以首先根据所选的
朋友筛选列表，然后返回到关键字匹配

filteredList () {
  return this.selected ? [this.selected] : this.friends.filter(friend => {
    let search = this.keyword.trim().toLowerCase()
    return friend.name.toLowerCase().includes(search) || friend.age.includes(search)
  })
}

我想这就是你想要的：


const-app=新的Vue({
el:“#应用程序”，
数据：{
关键字：“”，
朋友们：[
{
姓名：“唐尼”，
年龄：“20”
},
{
姓名：“乔安妮”，
年龄:"19岁",，
},
{
姓名：“大卫”，
年龄：“26”
},
{
姓名：“彼得”，
年龄：“23”
},
{
姓名：“约翰”，
年龄：“29”
},
{
姓名：“杰森”，
年龄：“19”
},
],
所选：空
},
计算：{
过滤器列表（）{
如果（！this.selected）{
返回此.friends.filter（（friend）=>{
返回friend.name.toLowerCase（）.includes（this.keyword）+friend.age.includes（this.keyword）+friend.name.includes（this.keyword）；
});
}否则{
返回[this.selected]；
}
},
},
方法：{
排除（朋友）{
如果（！this.selected）{
this.selected=朋友；
}否则{
this.selected=null；
}
},
}
});

{{friend.name}-{{friend.age}
这是一个简单的问题，甚至不需要与vuejs做任何事情，这是一个js问题抱歉，仍在学习中，您可以帮助我编写代码吗？您的筛选器表达式使用了一个奇怪的运算符选择。您可能想要
|
，而不是
+
，尽管我猜添加
true
或
false
的数字等价物也有类似的效果effect@Phil听起来他想要的是不可纠正的错误，我仍然认为。当作为数字处理时，布尔加法的作用与任何
true
（或
1
）使表达式成为truthyNice解决方案的作用相同，但您可能也应该将关键字小写。@puelo只是使用了与OP的代码中相同的表达式，但这一点很好。更新你缺少关键词搜索你是对的，谢谢你的提醒，编辑了答案。
exclude (friend) {
  this.selected = this.selected ? null : friend
}

filteredList () {
  return this.selected ? [this.selected] : this.friends.filter(friend => {
    let search = this.keyword.trim().toLowerCase()
    return friend.name.toLowerCase().includes(search) || friend.age.includes(search)
  })
}