在用户键入输入栏时通过表进行筛选

By simon at 8 天前 • 0人收藏 • 3人看过

我有一个基于国家对象数组填充的表格,我还有一个搜索栏,通过国家数组实时过滤与表格互动,只显示部分或完全匹配用户在搜索栏输入的国家。

问题是我是新手,我不知道如何让这个方法起作用。 如果有人可以看看我的代码,并指出我的正确直接或我正在做什么错误,这将是伟大的!

所以现在我的逻辑是在文本字段上有一个 v-model,它将用户类型绑定到一个名为"filterBy"的数据值。

我的理解可能是不正确的,但我现在想的是,通过在 computed 中创建一个 filteredCountries 函数,并且由于 computed 会在函数中的变量发生变化时运行,因此每当搜索栏中输入某些内容时,它就会自动被调用,从而过滤出 countries 数组,表就会被重新输入。

模板 div 类"countries-table"div class"countries-Search-bar"v-flex xs12 sm6 md3 v-text-field v-model"filterBy"占位符"按国名或 alpha2"/ v-flex / v-data-table: headers"headerValues": items": pagination.item": pagination.item-key"id"class"elevation-1": rows-per-page-items"[300]"template v-slot":"headers in props."""""""key headtext"""""""""? 'desc':'asc',header.value pagination.sortBy? "active":"]"@click"changeSort (header.value)"v-icon small arrow upward / v-icon { header.text } / th Edit / th / th / tr / template v-slot: items"props"tr: active"props.selected"@click"props.selected! 道具。 选择"td { props.item.country alpha2} / td class"text-xs-right"{ props.item.} / td boolean-cell custom-class"text-xs-right": input"props。 项目。 "is active": output"{ true:'Yes',false:'No'}"/ boolean-cell date-cell custom-class"text-xs-right": input"props". 项目。 句子太长,请短一点。 分页。 正在下降! { this.pagination.descending }}} / script

尽管我在搜索栏中输入了一些内容,但是表与我当前使用的代码保持不变。

谁能告诉我我哪里做错了?

1 个回复 | 最后更新于 8 天前
8 天前   #1

对于V 型数据表你正在使用的物品项目作为一个道具。 你应该使用过滤国家计算属性。

登录后方可回帖

Loading...