Question

我有一个可以搜索姓名/年龄的系统。我想记录我点击控制台的任何数组选项，例如，点击＆＃34; Donnie - 20＆＃34;，控制台日志＆＃34; Donnie＆＃34;。我尽力使用排除方法，但我似乎无法让它工作

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>

Answer 1

你已经为你的方法添加了2个参数，但你没有传递任何东西。

在方法中调用this.age正在寻找未定义的data.age。您要做的是将HTML部分更改为：

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

然后将您的方法更改为：

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

或者您希望控制台字符串看起来像什么。

Vue.js - 单击控制台时输出数组选择

1 个答案: