CODEWITHSUNDEEP
htmlvue.js
Donnie Berry
Donnie Berry

Reputation: 65

Vue.js - Output array selection on click to console

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>

Upvotes: 0

Views: 816

Answers (1)

Dan Gamble
Dan Gamble

Reputation: 4165

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.

Upvotes: 1

Related Questions