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

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

如果我的代码如下面的代码在我的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>
你孩子啊你孩子啊提问于
叮当叮当スターバーストするには回答于

我想这就是你想要的:

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"
      },
    ],
    selected: null
  },
  computed: {
    filteredList() {
      if (!this.selected) {
        return this.friends.filter((friend) => {
          return friend.name.toLowerCase().includes(this.keyword) + friend.age.includes(this.keyword) + friend.name.includes(this.keyword);
        });
      } else {
        return [this.selected];
      }
    },
  },

  methods:{
    exclude(friend) {
      if(!this.selected) {
        this.selected = friend;
      } else {
        this.selected = null;
      }
    },
  }

});
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
    <div v-for="friend in filteredList" class="card" @click="exclude(friend)">
      {{friend.name}} - {{friend.age}}
    </div>
</div>

回答过的其他问题

如何快速入门Kafka消息队列?

叮当叮当スターバーストするには

有个问题,腾讯云也有Ckafka,优势在哪里?

第一个请求因com.netflix.zuul.exception.ZuulException而失败:Hystrix Readed超时

叮当叮当スターバーストするには
已采纳
您似乎需要增加读取和连接超时。 这也可以通过配置选项完成,但是ribbon。它用作客户端负载平衡器,因此需要一些时间来获取可用的服务实例。 这是我的一个项目的工作配置: ribbon: ConnectTimeout: 10000 ReadTimeout: ...... 展开详请

如何在选中时更改BottomNavigationBarItem图标,Flutter?

叮当叮当スターバーストするには
在BottomNavigationBarItem中添加了新功能active icon。当标签处于活动状态时,我们可以使用它来说明图标应该是什么 bottomNavigationBar : new BottomNavigationBar( currentIndex: in...... 展开详请

python如何将列表写入CSV中的列?

叮当叮当スターバーストするには
将它们改为行 rows = zip(list1,list2,list3,list4,list5) 然后 import csv with open(newfilePath, "w") as f: writer = csv.writer(f) for row in...... 展开详请

从Applescript设置弹出按钮值

叮当叮当スターバーストするには
我想你只需要等到“Save Copy In ...”窗口出现。试试这段代码,它会添加一个寻找窗口的延迟循环。 tell application "System Events" tell process "Pro Tools" tell menu bar ...... 展开详请

如何将* _Ctype_char转换为* _Ctype_uchar

叮当叮当スターバーストするには
运行下方代码: compressedData := unsafe.Pointer(data) 和 (*C.uchar) (compressedData) ... 展开详请

关于作者

所属标签

扫码关注云+社区

领取腾讯云代金券