问题标签 [buefy]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
javascript - buefy 上的复选框值错误行为
我从一个数组生成一个复选框列表,当我选择一些框时,v-model 值(创建 Vue 实例时声明的生成数组)不会将新框值添加到数组中,而是替换为空数组并将值放入其中。
举个例子:我得到了 3 个值“Cat”、“Dog”和“Bird”。当我检查“Cat”时,数组看起来像[“Cat”],当我用“Cat”检查“Dog”时,数组看起来像[“Dog”]。
当我使用在数据中定义的变量(数组)时它可以工作,但是当我在表单变量中使用我的数组时它不起作用。
bulma - 对齐 Buefy 下拉菜单以避免切边
我从页面右侧的图标触发了 Buefy 下拉菜单。当我激活它时,生成的菜单左侧与图标对齐,菜单右侧比图标宽,从页面向右延伸并被切断,如下所示:
(要查看效果,您可能必须单击整页链接以使结果窗口足够宽,以使“@”不会换行到左侧。)
Bulma 能够右对齐菜单,以便菜单的左侧延伸到页面中,使其完全可见。
https://bulma.io/documentation/components/dropdown/#right-aligned
如何在 Buefy 中获得相同的效果?我发现 Buefy 示例文档过于简洁,但我认为我可以在
<b-dropdown>
元素中添加“is-bottom-left”。正如片段所示,这没有任何效果。
此外,当页面缩小时,下拉图标将重新定位到页面的左侧。假设上述问题已得到修复,在这种情况下,如何将菜单对齐恢复到原来的状态(左侧对齐)?
javascript - b表列的自定义排序
我有一个包含文件和文件夹的 b-table-column,其中通过 props.row.itemtype 区分为“文件”或“文件夹”。我想对该列进行排序,以便将文件和文件夹分开分组。
我阅读了一些关于 buefy 的自定义排序属性的内容,但对它了解不多。
谁能帮我实现这个?
validation - Buefy b-checkbox 和 VeeValidate
我正在尝试使用VeeValidate和Buefy制作一个必需的复选框 - 即必须选中复选框。
有没有办法v-validate="'required'"
在单个 Buefy 上使用或类似的方法<b-checkbox/>
?
<input type="checkbox">
在这种情况下,我必须退回到香草吗?
Buefy 文档有一个关于使用 VeeValidate 的页面,但未涵盖复选框。
谢谢
vue.js - 如何将类应用于 Buefy 表中的特定单元格?
我想知道是否有一种方法可以动态应用针对 Buefy 表中特定单元格的类。例如,以下是我正在处理的代码:
模板:
脚本:
现在,由于has-background-info
设置为 true,整行都以蓝色突出显示。
但是,我想做的是仅针对特定单元格并通过像这样传递单元格的值来有条件地应用类。
现在,我正在尝试将单元格的值传递给classObject
这样
<b-table-column :class="classObject(props.row[column.field])" v-for="(column, index) in columns" :key="index"
并尝试相应地设置课程
但是,上述方法不起作用。有没有其他方法可以做到这一点?
javascript - “TypeError:无法读取未定义的属性'添加'”在创建的生命周期(Vue,buefy)
我正在使用 buefy 进行一个项目,但一直受到
TypeError: Cannot read property 'add' of undefined
错误的影响。
当我尝试在created
() 生命周期的嵌套元素上添加类时。这是我的代码:
vue.js - Buefy/BoostrapVue 命名空间冲突
我正在尝试使用 BootrapVue 同时使用 buefy 的 b-table 组件。我猜 BootstrapVue 也有一个名为 b-table 的组件,这会导致冲突并导致 buefy 的表无法正常工作。当我删除 BootstrapVue 时,Buefy 表正确显示。我是 vue 的新手,我不确定如何解决这样的命名空间冲突,或者是否有可能。
main.js
元数据表.js
vue.js - 如何使用 Buefy 自动完成绑定 id 值但显示名称值?
我正在尝试将Buefy Autocomplete集成到我的网站中。我的数据是一个对象数组,每个对象都包含一个整数 ID 和一个字符串名称。像这样
正如文档所说,该field
属性用于显示为选定的值并返回相同的值
我想将该name
属性用作显示文本,但将其id
用作选定选项。
此外,当我从 API 获得结果时,我得到国家id
,我想根据id
这是示例小提琴
任何帮助将不胜感激。
vue.js - 使用 Vue.js 未在 Bulma 选项卡中加载传单地图
我在使用 Vue.js 和 Bulma 选项卡组件(通过 Buefy)加载传单地图时遇到问题。
如果地图放置在选项卡内,则在调整浏览器窗口大小之前它不会加载所有图块。
如果地图放置在 Bulma 选项卡组件之外,则它会毫无问题地加载。
调用map.invalidateSize()
似乎有帮助,但是要在选项卡更改时自动执行此操作,我必须使用它来调用它setTimeout
并放置非常大的延迟,例如 1 秒 - 这非常难看。
如果没有这种invalidateSize
解决方法,如何使它工作?
问题示例:https ://codepen.io/alxxnder/pen/zyYxwd
没有问题的示例:https ://codepen.io/alxxnder/pen/LMYEjr
代码: