- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我是一个非常新的编程。我试图弄清楚如何绑定(bind)数据以获取链接:href 使用 store、vuex 和 bootstrap-vue 表工作。我为此花了4天时间,现在我快死了。请帮忙。
book.js(商店,vuex)
books: [
{
id: 1,
name: "name 1",
bookTitle: "book1",
thumbnail: '../../assets/img/book01.jpeg',
url: "https://www.google.com",
regDate: '2019-10'
},
{
id: 2,
name: "name2",
bookTitle: "book2",
thumbnail: "book2",
url: "http://www.yahoo.com",
regDate: '2019-10'
},
<script>
export default {
name: "BookList",
components: {
},
computed: {
fields() {
return this.$store.state.fields
},
books() {
return this.$store.state.books
},
bookUrl() {
return this.$store.state.books.url
}
},
data() {
return {
itemFields: this.$store.state.fields,
items: this.$store.state.books,
//url: this.$store.state.books.url
}
}
};
</script>
<template>
<b-container>
<b-table striped hover :items="items" :fields="itemFields" >
<template v-slot:cell(thumbnail)="items">
<img src="" alt="image">
</template>
<template v-slot:cell(url)="items">
<b-link :href="bookUrl" >link</b-link>
</template>
</b-table>
</b-container>
</template>
最佳答案
单元格槽包含您通常感兴趣的两个属性:
item
(当前行,或者准确地说,当前 item
中的 items
)value
(单元格 - 或者,准确地说,value
中当前列的 item
)。 v-slot:cell(url)="{ value, item }"
,
value
相当于
item.url
<template v-slot:cell(url)="{ value }">
<b-link :href="value">link</b-link>
</template>
<template v-slot:cell(url)="slot">
<b-link :href="slot.value">{{ slot.item.bookTitle }}</b-link>
</template>
<template v-slot:cell(url)="{ item }">
<b-link :href="item.url">{{ item.bookTitle }}</b-link>
</template>
itemFields
被引用但未定义,未使用正确的 setter/getter 等...)。有关详细信息,请查看工作示例。
关于vue.js - 如何在 v-slot :cell() template of b-table - BootstrapVue 中获取项目值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58474034/
我正在尝试使用找到的 bootstrapVue 表 here 如果我完全使用他们的示例,那么该表效果很好。 但是一旦我使用 我的表不显示,当我查看开发工具时,我看到我的表对于从 api 返回的
我正在尝试使用找到的 bootstrapVue 表 here 如果我完全使用他们的示例,那么该表效果很好。 但是一旦我使用 我的表不显示,当我查看开发工具时,我看到我的表对于从 api 返回的
是否有最佳方式垂直对齐我的内容?我有 3 个按钮,我想垂直对齐。 Create Search
我需要使用 bootstrap-vue 格式化程序(b-table - 字段)将值格式化为货币。 我目前的尝试: fields: [ { key: 'value', label: 'value
我正在尝试将图像添加到 BoostrapVue 中 b-carousel 的 img-src="" 属性。该图像当前保存在资源文件夹中。 Hello world!
我在使用 BootstrapVue 中的 b-modal 组件时遇到问题,这是点击事件: responseModal(activity) { this.$bvModal.show("respo
我需要更改我的 bootstrap vue 项目中的颜色,但我不知道该怎么做。 初级次要的成功信息警告危险光黑暗 最佳答案 只需阅读文档 ;) https://bootstrap-vue.js.org
我想使用 BootstrapVue 从路线列表创建顶级导航器图书馆。应用程序中有路由器链接(通常情况下是计算列表),我需要在循环中的页面上组成一组 b-nav-item 元素。这是我创建的 vue 组
嗨,我试图在带有 typescript 的 vue 3 应用程序中使用 bootstrapVue,这是我的 main.ts: import { createApp } from 'vue' impor
如果当前用户是管理员,我只想显示我的专栏之一。我不知道如何使用 bootstrapVue 来做到这一点。有什么想法吗? 最佳答案 这是基于 Troy 评论的片段。 我已向名为 requiresAdmi
我有一个数组,它使用 axios 从 Express API 填充了多个字段。但我想使用 BootstrapVue 仅列出 API 中所需的列。 我想它必须通过使用 for 循环来解决,但我不知道应该
目前使用 VueJs 和 Bootstrap Vue,我想知道如何使用将“事件”标签附加到我设置的导航链接。 Hom
我创建了一个按钮,单击该按钮会复制一些文本并显示工具提示,确认文本已被复制。我想让工具提示在 2 秒后消失。 我尝试使用 timeOut() 方法来淡化工具提示,但它不起作用。我正在使用来自 Boot
我正在尝试在 v-for 循环中使用 BootstrapVue - Modal,唯一的问题是模态按钮上的模态指令 ( v-b-modal.modal1 )。 modal1 应该是模态 id 的名称,因
我正在使用 bootstrap 创建一个表,其中一个字段是一个链接,应该使用 target="_blank" 在新选项卡中打开 但是,由于某种原因它不起作用,知道为什么吗? 谢谢。 完整代码:
我正在使用 Bootstrap-Vue 在表格中显示信息。显示的每个元素都有两个字段(名称和年龄)。到目前为止,我可以按一个字段(姓名或年龄)进行过滤,但我希望有两个输入可以同时按它们进行过滤。 因此
After being approved, the disbursement cannot be
我想问两个关于 BootstrapVue 中的 Sidebar 的问题。 打开侧边栏后禁用滚动 在侧边栏外单击时如何 处理关闭方法 ( Backdrop ) 我正在使用 https://bootstr
以下是 BootstrapVue 导航栏的使用方式 https://bootstrap-vue.js.org/docs/components/navbar ,但对于一个 View ,我需要从导航栏向它
使用 Vue.js 2.6.10 和 BootstrapVue 2.0.0-rc.20 并尝试在单击单个文件组件中的单独按钮时以编程方式显示下拉菜单。 div b-button(@click='
我是一名优秀的程序员,十分优秀!