Vue.js实现点击数组选项打印对应姓名至控制台的问题

我看到你现在的需求是点击搜索后的列表项时，把对应姓名打印到控制台，但目前的实现有几个小问题，咱们一步步来修正：

首先说计算属性filteredList的逻辑问题：你现在用+来连接三个includes的结果，这会把布尔值转成数字（true是1，false是0）相加，逻辑完全不对。我们需要的是「姓名包含关键词 或者 年龄包含关键词」，所以应该用逻辑或||，而且你重复写了两次姓名的判断，其实只需要一次就够了。

然后是点击事件和方法的问题：你绑定的@click="exclude()"没有传递当前的friend对象，而且exclude方法里错误地尝试打印this.age——这根本不是当前点击项的属性，我们需要的是接收点击的friend，然后打印它的name。

接下来是修正后的完整代码：

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() {
      // 统一转小写，让姓名搜索不区分大小写
      const lowerKeyword = this.keyword.toLowerCase();
      return this.friends.filter((friend) => {
        return friend.name.toLowerCase().includes(lowerKeyword) 
          || friend.age.includes(lowerKeyword);
      });
    }
  },
  methods:{
    // 方法名改成更语义化的名称，明确作用
    printFriendName(friend) {
      console.log(friend.name);
    },
  }
})

HTML 代码 #

<div id="app">
  <div class="wrapper">
    <div class="search-wrapper">
      <input type="text" v-model="keyword" placeholder="Search.."/>
      <label>Search Title:</label>
    </div>
    <!-- 点击时把当前循环的friend对象传递给方法 -->
    <div v-for="friend in filteredList" class="card" @click="printFriendName(friend)">
      {{friend.name}} - {{friend.age}}
    </div>
  </div>
</div>

关键修改点说明： #

• 计算属性里把+替换成||，同时统一将关键词转成小写，让姓名搜索支持不区分大小写（年龄是字符串，直接判断包含即可）。
• 把方法名从exclude改成printFriendName，语义更清晰，一眼就能知道它的作用。
• 点击事件中传递了当前循环的friend对象，这样方法里就能直接访问到该对象的name属性。
• 方法里直接打印friend.name，替代了原来错误的this.age引用。

这样修改后，当你点击任意列表项（比如“Donnie - 20”），控制台就会正确输出“Donnie”啦！

内容的提问来源于stack exchange，提问作者Donnie Berry