- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一个基于国家/地区对象数组填充的表格,并且还有一个搜索栏,它将通过国家/地区数组进行实时过滤并仅显示部分或完全匹配用户的国家/地区来与表格进行交互在搜索栏中输入。
问题是我是 vue 新手,我无法弄清楚如何让它工作。如果有人可以查看我的代码并直接指出我的正确方向或我做错了什么,那就太好了!
所以现在我的逻辑是,我在文本字段上有一个 v-model,它将把用户输入的任何内容绑定(bind)到名为“filterBy”的数据值。
我的理解可能是不正确的,但我现在的想法是,通过在compute内部创建一个filteredCountries函数,并且由于compute会在函数内部的变量发生变化时运行,因此每当在搜索栏中输入内容时它都会自动被调用,从而过滤国家数组,并且表格将被重新渲染。
<template>
<div class="countries-table">
<div class="countries-search-bar">
<v-flex xs12 sm6 md3>
<v-text-field
v-model="filterBy"
placeholder="Search by country name or alpha2"
/>
</v-flex>
</div>
<v-data-table
:headers="headerValues"
:items="items"
:pagination.sync="pagination"
item-key="id"
class="elevation-1"
:rows-per-page-items="[300]"
>
<template v-slot:headers="props">
<tr>
<th
v-for="header in props.headers"
:key="header.text"
:class="[
'column sortable',
pagination.descending ? 'desc' : 'asc',
header.value === pagination.sortBy ? 'active' : ''
]"
@click="changeSort(header.value)"
>
<v-icon small>arrow_upward</v-icon>
{{ header.text }}
</th>
<th>
Edit
</th>
</tr>
</template>
<template v-slot:items="props">
<tr :active="props.selected" @click="props.selected = !props.selected">
<td>{{ props.item.country_alpha2 }}</td>
<td class="text-xs-right">{{ props.item.country_name }}</td>
<boolean-cell
custom-class="text-xs-right"
:input="props.item.is_active"
:output="{ true: 'Yes', false: 'No' }"
></boolean-cell>
<date-cell
custom-class="text-xs-right"
:input="props.item.updated_at"
></date-cell>
<td class="text-xs-right" @click="triggerEdit(props.item)">
<v-icon class="edit-icon">edit</v-icon>
</td>
</tr>
</template>
</v-data-table>
</div>
</template>
<script>
import BooleanCell from '~/components/global-components/Table/BooleanCell'
import DateCell from '~/components/global-components/Table/DateCell'
export default {
components: {
BooleanCell,
DateCell
},
props: {
headerValues: {
type: Array,
required: true
},
items: {
type: Array,
required: true
}
},
computed: {
filteredCountries() {
return this.items.filter(country => {
return country.country_name.includes(this.filterBy)
})
}
},
data() {
return {
pagination: {
sortBy: 'country_alpha2'
},
filterBy: ''
}
},
methods: {
changeSort(headerValue) {
if (this.pagination.sortBy === headerValue) {
this.pagination.descending = !this.pagination.descending
} else {
this.pagination.sortBy = headerValue
this.pagination.descending = false
}
}
}
}
</script>
尽管我在搜索栏中输入了内容,但该表与我当前的代码保持不变。
有人可以告诉我我做错了什么吗?
最佳答案
对于 v-data-table
项目,您使用的是作为 Prop 的 items
。您应该使用 filteredCountries
计算属性。
关于javascript - 当用户在输入栏中键入内容时过滤表格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56160414/
考虑代码: def foo() -> ??: return bar() 我怎么能说我希望 foo 的返回类型与 bar() 的返回类型相同? 在 C++ 中,我可以使用 decltype,类
我运行以下 mysql 查询并看到第一个查询的类型为 ALL。 mysql> EXPLAIN SELECT one.language_id as filter_id,
http://muaddibspace.blogspot.com/2008/01/type-inference-for-simply-typed-lambda.html是 Prolog 中简单类型 l
鉴于类型 type EnumerableComponentFactory = (config: { Container: React.ComponentType; Item: React.Co
我在我的自动 rmarkdown pdf 文档中使用 stargazer 包来制作漂亮的表格。默认情况下,Stargazer 将其表格放置在页面的中心。如何让观星者生成将表格与左侧对齐的 latex
class A: pass class B(A): pass ListOfA = List[A] list_of_a : ListOfA = [A(), A()] for e in [
我目前正在研究学习 WPF 和 Silverlight。到目前为止,我一直在用 Delphi 和 C# (Winforms) 进行开发。在看一些关于 WPF 的书籍和在线观看一些介绍性视频时,我的印象
在输入如下内容后: ) 按钮。但是那个按钮比较不方便。 (请注意,对于 Orientation="Horizontal" 等下拉选项不存在此问题,从下拉菜单中选择 Horizontal 后,插
我在输入以下内容时遇到问题。 问题在于 TeamIcon . 我的对象定义如下。 import TeamIcon from './components/icons/TeamIcon'; export
Demo 我这里有一个验证类是否存在于 div 中的演示。当没有类时,另一个类将从按钮中删除。基本上,当没有禁用按钮时,添加按钮上的禁用将被删除。 如果用户做的最后一件事是更改,这可以正常工作,但如果
这个问题在这里已经有了答案: How can I access object properties containing special characters? (2 个答案) 关闭 9 年前。 我
尝试创建一个 Web 应用程序(使用 mySQL 和 Python),其中包含马萨诸塞州的徒步旅行路线列表。我只想在一页上显示我的数据库中所有路径的名称,但不知道为什么什么都不显示: ########
您好,我想在使用 jQuery 的文本输入字段中键入时用点替换逗号。我现在有这段代码; $(document).on('change', '.unitprice', function() { $(
我为静态主页编写了以下代码。在这里我想使用类型化的库,它包含在部分“head.html”中。但是由于键入我的内容不断跳跃。这是因为在某个时刻字幕容器是空的。我试过添加默认占位符,但这似乎无法解决问题。
我想知道有没有类似于scanf的函数允许在c中自定义输入。我想要做的是当用户输入想要的日期时,每隔几个字符添加一个点。当用户想要确认他的输入时,他应该按下回车键,并且该变量被保存在某处。 示例:用户输
Java 中有没有办法让 ListModel 只接受特定类型?我要找的是类似 DefaultListModel 的东西或 TypedListModel ,因为 DefaultListModel 只实现
考虑如下数组类型: let example1: MyArray = ['John'], example2: MyArray = [4, 5, 1, 5, 'Eric'], exampl
我想弄清楚我是否正确输入了我的 React 高阶组件。在大多数情况下,这是正常工作的,但是在将 React 引用应用于 HOC 实例时,我遇到了输入问题。下面是一个简化的重现: import * as
这是 Python 3.7 我有一个这样的数据类: @dataclass class Action: action: str 但 Action 实际上仅限于值“bla”和“foo”。有没有一种明
我想弄清楚我是否正确输入了我的 React 高阶组件。在大多数情况下,这是正常工作的,但是在将 React 引用应用于 HOC 实例时,我遇到了输入问题。下面是一个简化的重现: import * as
我是一名优秀的程序员,十分优秀!