Vue+Buefy技术问询：@select代码含义及用户名提取至h1方案

一、@select="option => selected = option" 代码含义 #

这行代码是Buefy自动完成组件的选中事件绑定，拆解来看：

• @select：是Buefy为<b-autocomplete>提供的内置事件，当用户从下拉候选列表中点击选中任意一个选项时，这个事件就会触发。
• option => selected = option：这是一个ES6箭头函数，其中option是事件触发时组件传递过来的参数——也就是你选中的那条完整数据（比如你的data_test.json里的{"id":1,"user":{"first_name":"Jesse",...}}这类对象）。箭头函数的作用是把这个完整的选中对象赋值给你组件data里定义的selected变量，这样你就能在组件的其他地方使用这条选中的数据了。

另外补充下，你代码里的field="user.first_name"是告诉组件：下拉列表里要显示每个选项的user.first_name字段作为展示文本，但@select返回的是整条原始数据，这能让你除了first_name之外，还能拿到id、last_name等其他信息。

二、实现「获取first_name并放入

既然selected已经存储了完整的选中数据，你只需要在模板里通过selected?.user.first_name（可选链操作符?.可以避免selected为空时报错）来获取first_name，然后放到<h1>标签里即可。

修改后的完整代码示例如下：

<template>
<section>
  <!-- 新增的h1标签，显示选中的first_name -->
  <h1>{{ selected?.user.first_name || '请选择一个姓名' }}</h1>
  
  <div class="field">
    <b-switch v-model="keepFirst">
      Keep-first
      <small>(始终默认选中第一个选项)</small>
    </b-switch>
  </div>
  <p class="content"><b>已选中:</b> {{ selected }}</p>
  <b-field label="查找姓名">
    <b-autocomplete 
      v-model="name" 
      placeholder="例如: Anne" 
      :keep-first="keepFirst" 
      :data="filteredDataObj" 
      field="user.first_name" 
      @select="option => selected = option"
    >
    </b-autocomplete>
  </b-field>
</section>
</template>
<script>
import data from '@/assets/data_test.json'
export default {
  data() {
    return {
      data,
      keepFirst: false,
      name: '',
      selected: null
    }
  },
  computed: {
    filteredDataObj() {
      return this.data.filter((option) => {
        return option.user.first_name
          .toString()
          .toLowerCase()
          .indexOf(this.name.toLowerCase()) >= 0
      })
    }
  }
}
</script>

• 这里用|| '请选择一个姓名'做了默认值处理，当还没有选中任何选项时，h1会显示提示文本。

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