Vue.js——如何显示错误的数组元素?

  • 回答 (2)
  • 关注 (0)
  • 查看 (105)

如果我的代码如下面的代码在我的vue.js中,点击一个按钮后,我怎样才能显示我点击的数组项目(例如,Donnie)并隐藏其余的所有内容?那么当你再次点击唯一显示的元素时,再次显示所有其他数组元素?

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:

   <div v-for="friend in filteredList" class="card" @click="exclude(friend)">
      {{friend.name}} - {{friend.age}}
    </div>
你孩子啊你孩子啊提问于
脸滚键盘dj以梦为马,诗酒趁年华回答于

如果项目已被点击,你应该能够为你的过滤器表达式添加身份检查。

首先添加一个属性:

data {
  selected: null,
  keyword: '',
  //etc
}

然后在你的exclude方法:

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

现在你的计算属性可以selected首先基于朋友过滤列表,然后回退到关键字匹配:

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)
  })
}

回答过的其他问题

为什么不同的人在购物网站上搜索同样的东西看到的结果不一样?

脸滚键盘dj以梦为马,诗酒趁年华
算法推荐系统咯。 我用一个相对简单的模式来说明一下好了: 你开始进入某购物网站时 搜索一个东西的时候 比如说显卡吧 [图片] 会有很多选项供你选择 首先,店家在上架一个货物时,要选择xx品牌 xx内核 xx显存 xx位宽 xx型号....这些东西会显示在这里 [图片] ...... 展开详请

Java怎么提取字符串里面特定的内容?

脸滚键盘dj以梦为马,诗酒趁年华
已采纳
一部分 后面自己想想把 还可以用正则 String a = "id-1=144761,fileName-2=林俊杰 - 剪云者 [mqms2].mp3,title-3=剪云者, duration-4=215824, singer-5=林俊杰, album-6=伟大的渺小, ye...... 展开详请

静态转换后将变量转换为枚举

脸滚键盘dj以梦为马,诗酒趁年华
enumTests e_Test = static_cast<enumTests>(i); GetTest(e_Test); i = static_cast<int>(e_Test); 是正确的方法。 以下编译,但不幸的是,打破了严格的别名规则,UB也是如此: static_...... 展开详请

无法解决:android.arch.lifecycle:extensions:1.0.0-alpha1 android studio 3.0?

脸滚键盘dj以梦为马,诗酒趁年华
添加app / gradle文件 compile "android.arch.lifecycle:extensions:1.0.0-alpha4" compile "android.arch.persistence.room:runtime:1.0.0-alpha4" anno...... 展开详请

腾讯云服务器初始化设置是在哪里,服务器开通后配置了很多东西,现在想恢复干净原始系统,不知道怎么操作?

脸滚键盘dj以梦为马,诗酒趁年华
已采纳

个人非经营还要备案吗?

脸滚键盘dj以梦为马,诗酒趁年华

关于作者

所属标签

扫码关注云+社区

领取腾讯云代金券