将列表项的属性绑定到任何参数

Question

我有从 api 调用获得的项目列表，我想从该列表中选择搜索到的项目。例如我有：

students: [{'fullName':'A'},{'fullName':'B'}] // this I get from api

现在我想从 students 中搜索名称并获取被选中的名称。

这是我所做的：

<div class="text-center">
        <v-menu bottom offset-y>
          <template v-slot:activator="{ on, attrs }">
            <v-text-field
              append-icon="search"
              label="Filter By Student"
              single-line
              hide-details
              v-bind="attrs"
              v-on="on"
              />
          </template>
          <v-list style="max-height: 100px" v-model="searchStudent">
            <v-list-item
              v-for="item in filteredStudent"
              :key="item.fullName"
              v-bind="item"
            >
              <v-list-item-title  @click="filter_Students(item)">{{ item.fullName }}</v-list-item-title>
            </v-list-item>
          </v-list>
        </v-menu>
      </div>
export default {
    data () {
       students: [],
       searchStudent: '',
    },
    computed:{
       filteredResident:function(){
        var self=this;
        return this.students.filter(function(student){return students.fullName.toLowerCase().indexOf(self.searchStudent.toLowerCase())>=0;});
        }
    },
}

我的问题是，当我从对象的学生列表中搜索 fullName 并选择任何一个时，我想获取该所选学生的 fullName 并与 searchStudent 绑定

Answer 1

如果我正确理解您的问题。试试下面的代码：

return this.students
  .filter(({fullName}) => fullName.toLowerCase().includes(this.searchStudent.toLowerCase())
  .map(({fullName}) => fullName)