个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
35
4
我正在使用 VueJS 和 Beufy 进行自动完成，我认为我可以正常工作，但似乎无法正确设置过滤器。当我输入描述时，输入框会过滤(尝试输入 ar 并正确过滤)但我看不到可供选择的选项。这些选项实际上就在那里，因为我可以单击其中一个选项，我将看到这样的数据:
第二个问题，大概相关的是，当我选择这些不可见选项之一时，我收到以下错误:
vue:634 [Vue warn]: Error in render: "TypeError: Cannot read property 'toLowerCase' of undefined"
我认为自动完成中的描述是空白的，所以选择一个意味着没有任何 toLoweCase()。
请问我错过了什么？
<!DOCTYPE html>
<html>
<head>
<title>Product Search Test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://unpkg.com/buefy/dist/buefy.min.css">
</head>
<body>
<div id="app">
<div class="container">
<b-field label="Find a Product">
<b-autocomplete
:data="filteredDataArray"
v-model="item_entered"
placeholder="e.g. SKU87128398"
:loading="isFetching"
@select="option => selected = option">
</b-autocomplete>
</b-field>
</div>
{{selected}}
</div>
<script src="https://unpkg.com/vue"></script>
<!-- Full bundle -->
<script src="https://unpkg.com/buefy/dist/buefy.min.js"></script>
<!-- Individual components -->
<script src="https://unpkg.com/buefy/dist/components/table"></script>
<script src="https://unpkg.com/buefy/dist/components/input"></script>
<script>
new Vue({
el: '#app',
data() {
return {
data: [],
selected: '',
isFetching: false,
item_entered: '',
initial_query: {
"message": "success",
"item_list": {
"Items": [{
"Description": "Marvel's Avengers",
"Highlight": "PEGI Rating: Ages 12 and Over",
"Id": "1118498",
"Type": "Product"
},
{
"Description": "LEGO Harry Potter Collection",
"Highlight": "PEGI Rating: Ages 10 and Over",
"Id": "28331719",
"Type": "Product"
},
{
"Description": "Star Wars Jedi: Fallen Order - Standard ",
"Highlight": "PEGI Rating: Ages 10 and Over",
"Id": "50510378",
"Type": "Product"
},
{
"Description": "Monster Hunter World Iceborne Master Edition",
"Highlight": "PEGI Rating: Ages 12 and Over",
"Id": "51580152",
"Type": "Product"
},
{
"Description": "High Street, Bruton - More Addresses",
"Highlight": "PEGI Rating: Ages 18 and Over",
"Id": "0AA-BA10",
"Type": "Group"
}
]
}
},
}
},
methods: {
getProductData: function(){
}
},
computed: {
filteredDataArray() {
return this.initial_query.item_list.Items.filter((option) => {
console.log(option.Description.toString().toLowerCase())
console.log(option
.Description
.toString()
.toLowerCase()
.indexOf(this.item_entered.toLowerCase()) >= 0)
return option
.Description
.toString()
.toLowerCase()
.indexOf(this.item_entered.toLowerCase()) >= 0
})
}
}
})
</script>
</body>
</html>
最佳答案
这比我想象的要难找，但尝试了一个错误，我意识到我错过了以下字段:
field="Description"
你需要告诉自动完成字段你想在下拉列表中使用对象中的哪个键，在我的例子中它是描述所以工作代码是:
<!DOCTYPE html>
<html>
<head>
<title>Product Search Test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://unpkg.com/buefy/dist/buefy.min.css">
</head>
<body>
<div id="app">
<div class="container">
<b-field label="Find a Product">
<b-autocomplete
:data="filteredDataArray"
v-model="item_entered"
placeholder="e.g. SKU87128398"
:loading="isFetching"
field="Description"
@select="option => (selected = option)">
</b-autocomplete>
</b-field>
</div>
{{selected}}
</div>
<script src="https://unpkg.com/vue"></script>
<!-- Full bundle -->
<script src="https://unpkg.com/buefy/dist/buefy.min.js"></script>
<!-- Individual components -->
<script src="https://unpkg.com/buefy/dist/components/table"></script>
<script src="https://unpkg.com/buefy/dist/components/input"></script>
<script>
new Vue({
el: '#app',
data() {
return {
data: [],
selected: '',
isFetching: false,
item_entered: '',
initial_query: {
"message": "success",
"item_list": {
"Items": [{
"Description": "Marvel's Avengers",
"Highlight": "PEGI Rating: Ages 12 and Over",
"Id": "1118498",
"Type": "Product"
},
{
"Description": "LEGO Harry Potter Collection",
"Highlight": "PEGI Rating: Ages 10 and Over",
"Id": "28331719",
"Type": "Product"
},
{
"Description": "Star Wars Jedi: Fallen Order - Standard ",
"Highlight": "PEGI Rating: Ages 10 and Over",
"Id": "50510378",
"Type": "Product"
},
{
"Description": "Monster Hunter World Iceborne Master Edition",
"Highlight": "PEGI Rating: Ages 12 and Over",
"Id": "51580152",
"Type": "Product"
},
{
"Description": "High Street, Bruton - More Addresses",
"Highlight": "PEGI Rating: Ages 18 and Over",
"Id": "0AA-BA10",
"Type": "Group"
}
]
}
},
}
},
methods: {
getProductData: function(){
}
},
computed: {
filteredDataArray() {
return this.initial_query.item_list.Items.filter((option) => {
console.log(option.Description.toString().toLowerCase())
console.log(option
.Description
.toString()
.toLowerCase()
.indexOf(this.item_entered.toLowerCase()) >= 0)
return option
.Description
.toString()
.toLowerCase()
.indexOf(this.item_entered.toLowerCase()) >= 0
})
}
}
})
</script>
</body>
</html>
关于javascript - 如何让我的 VueJA/Buefy 自动完成显示筛选选项？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/63738031/
35
4
0
我是 vue 的新手，目前正在尝试使用 buefy 库来使用分页来一次获取有限数量的行以提高页面加载性能。这是我的大部分代码。 f.id" :per-page="25"
我想显示一个应包含几行新行作为工具提示文本的文本。 Action 使用 \r\n 的新行或不工作。 如何在该元素上强制换行？ 最好有适当的 html 内容作为工具提示，但目
有没有一种方法可以锁定/使表格组件的标题保持不变，只允许行滚动？ 最佳答案 我通常解决这个问题的一种方法是使用 Sticky Method，就像这样 虽然这有一个主要缺点，但 IE6-IE10 不支持
我正在处理 Buefy 输入字段并寻找一种方法来告诉我任何表单字段是否有任何错误。 Buefy Input Documentation 如果没有可用的方法，那么我们如何
我有一个详细的表格。每当我单击 V 形标记时，都会显示相应行的详细 View 。在我的情况下，只打开一个详细 View 会好得多。期望的结果是:每当我单击 V 形标志时，该详细 View 就会打开，而
我将 vuejs 与 bulma 和 buefy 一起使用。我正在使用 buefy modal 并尝试使用其“width”属性设置模态宽度。我试图在 html 中指定它以及使用 javascript
在 Buefy 表格中，我需要将数据显示为常规表格，在所有媒体上水平列，而不是在移动设备上使用堆叠卡片。为了适应内容，我使用媒体查询来简单地隐藏除最重要的列之外的所有列。
总的来说，我对 Buefy、vue 和 javascript 很陌生，我正在尝试将分组下拉列表添加到 b-taginput 添加 autocomplete 似乎启用了下拉列表，但它缺少组。以下是我到目
问题 当我添加 组件添加到页面，它看起来很棒，我可以向其中添加文件，并且可以获得 姓名 的文件。但是我如何获得 文件内容 ? 我试过的 doc for the Upload component提Fil
我正在使用 VueJS 和 Beufy 进行自动完成，我认为我可以正常工作，但似乎无法正确设置过滤器。当我输入描述时，输入框会过滤(尝试输入 ar 并正确过滤)但我看不到可供选择的选项。这些选项实际上
我想为我的类(class)项目制作分页，目前使用 Vue.js 和 Bulma + Buefy。我有一个对象数组，我想每页显示 5 个。已经完成布局和一切，我只想知道如何使分页工作。抱歉，无法发布代码
我想在用户关注表单元素(使用 Vue/Buefy 制作)时触发一个事件。我是新手，也许有人可以告诉我如何触发它？ 最佳答案 您可以像这样在输入元素中使用事件处理 // or 现在当用户关注元素时 y
我想知道是否有一种方法可以动态应用针对 Buefy 表中特定单元格的类。例如，以下是我正在处理的代码: 模板: {{ props.row[column.f
我正在尝试通过事件清除 Buefy 输入，但没有任何反应。但是，此代码适用于基本输入。 这是我的 HTML: 这是我的脚本: methods: { addItem () {
我正在尝试使用 BootrapVue 同时使用 buefy 的 b-table 组件。我猜想 BootstrapVue 也有一个名为 b-table 的组件，它会导致冲突并导致 buefy 的表无法正
我在页面上的表单中使用 Vue/Buefy 作为日期选择器(第 2 步)https://waytorussia.net/Services/VisaSupport/Tourist.html 有时只会错误
我正在尝试从 Buefy 访问 Toast 组件以在每次有人尝试访问仅授权 View 时显示错误: // ... import { Toast } from 'buefy/dist/component
我是 Nuxt js 的新手，我在使用 更改页面时遇到了一些 CSS 问题 如果我使用 then buefy CSS 将一个页面导航到另一个页面，则无法正确加载 如果我刷新页面 ctrl+f5 刷新后
我正在尝试从 切换我的项目 bool 玛 + jQuery 至 buefy .我加载 buefy , Vue 和 Font Awesome 来自 CDN。 (buefy@0.6.7, vue@2.5.
是否有内置的方法将箭头键(右、左)绑定(bind)到 buefy 分页元素？还是我需要使用 vanillaJS 键盘事件？ 最佳答案 Vue 定义 key modifiers 关于vue.js -
我是一名优秀的程序员,十分优秀！