Vue.js - Only display false array elements

Question

If I have code like the code below in my vue.js, upon clicking a button, how can I only display the array item I clicked ( for e.g, Donnie) and hide all of the rest? (Joanne, Peter e.t.c), then when you click the only displayed element again, make all of the other array elements display again?

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>

this is simple question and does not even have to do anything with vuejs, it is a js question — samayo
– samayo, Commented May 30, 2018 at 23:24
Your filter expression is using an odd choice of operator. You probably want ||, not + though I guess adding the numeric equivalents of true or false have a similar effect — Phil
– Phil, Commented May 30, 2018 at 23:39
@TheIncorrigible1 I still think ||. When treated as numbers, Boolean addition works the same as OR in that any true (or 1) makes the expression truthy — Phil
– Phil, Commented May 30, 2018 at 23:53

Phil · Accepted Answer · 2018-05-30 23:55:36Z

1

You should be able to add an identity check to your filter expression if an item has been clicked.

Start by adding a property to store the clicked friend. I'll call mine selected

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

Then in your exclude method

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

now your computed property can filter the list based on the selected friend first, then fall back to the keyword match

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

edited May 30, 2018 at 23:55

answered May 30, 2018 at 23:52

Phil

166k25 gold badges265 silver badges269 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

puelo Over a year ago

Nice solution, but you should probably also lower-case the keyword.

Phil Over a year ago

@puelo was just using the same expression as in OP's code but good point. Updated

Feel The Noise · Accepted Answer · 2018-05-30 23:58:15Z

1

I think that's what you're looking for:

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>

The trick here is that the selected data property store the friend and also doubles as a checker if there's a friend, so if not, show all, if is, show only that one.

edited May 30, 2018 at 23:58

answered May 30, 2018 at 23:53

Feel The Noise

6442 gold badges12 silver badges31 bronze badges

2 Comments

Phil Over a year ago

You're missing the keyword search

Feel The Noise Over a year ago

You're right, thank you for the heads up, edited the answer.

Collectives™ on Stack Overflow

Vue.js - Only display false array elements

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related