时间戳

首页 > 解决方案 > 将列表项的属性绑定到任何参数

vue.js - 将列表项的属性绑定到任何参数

问题描述

我有从 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

标签： vue.jsvuejs2vuetify.js

解决方案

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

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

推荐阅读