Vue.js - Output array selection on click to console

Question

I have a system where I can search names/ages. I want to log whatever array option I click to the console, for example, click "Donnie - 20", console logs "Donnie". I tried my best with the exclude method but I cannot seem to get it to work

Vue.js

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(filteredList, friends) {
      console.log(this.age);
    },
  }

  })

HTML

<div id="app">
  <div class="wrapper">
    <div class="search-wrapper">
        <input type="text" v-model="keyword" placeholder="Search.."/>
    <label>Search Title:</label>
      </div>
    <div v-for="friend in filteredList" class="card" @click="exclude()">
      {{friend.name}} - {{friend.age}}
    </div>

  </div>
</div>

Dan Gamble · Accepted Answer · 2018-05-30 15:59:17Z

1

You've added 2 arguments to your method but you aren't passing anything to it.

Calling this.age in the method is looking for data.age which is undefined. What you want to do is change your HTML portion to:

<div v-for="friend in filteredList" class="card" @click="exclude(friend)">

Then change your method to be:

exclude(friend) {
  console.log(`${friend.name} - ${friend.age}`);
},

Or whatever you'd like your console string to look like.

answered May 30, 2018 at 15:59

Dan Gamble

4,1852 gold badges28 silver badges46 bronze badges

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

3 Comments

Donnie Berry Over a year ago

Okay that works by using "console.log(friend.age)" now, how would I target every part of the array apart from the one I clicked?

Dan Gamble Over a year ago

@DonnieBerry What do you mean by target every part of the array? Do you want to log every person except the one you clicked?

Donnie Berry Over a year ago

Yes, For example, if I click "Donnie", it would log everybody APART from Donnie. My example I am going for is when I click an array (for e.g, Donnie), it will hide the rest of the array, and when I click "Donnie" againn, the rest of the array will show again.

Collectives™ on Stack Overflow

Vue.js - Output array selection on click to console

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related