Javascript 如何加载引导vue“；“b表”；使用"_showDetails"；？

我的vue页面中使用了引导vue“b表”。每行都有一个“查看详细信息”按钮，显示有关所选行的其他信息。我正在寻找一些示例，当用户单击查看详细信息时，这些示例可以向后端发送请求，从而展开行并显示从后端检索到的详细信息。bootstrap vue表中的“_showDetails”选项似乎很有限，因为所有示例都使用了与主表一起加载的数据，使用这种方式会使页面过载，因为我的每一行数据都太大

---

是否有任何示例或甚至其他LIB支持此类功能？

您可以使用

引导vue来实现这一点，而不会遇到任何问题

创建一个在单击“查看详细信息”按钮时被调用的方法，此方法将调用后端并将数据插入到项目中。检索到数据后，将项目上的
\u showDetails
设置为true，这将打开详细信息

您还可以在检索数据时立即打开它并显示加载消息，这取决于您


newvue({
el:“#应用程序”，
创建（）{
//获取初始数据
取（'https://reqres.in/api/users')
.then（response=>response.json（））
。然后（json=>
/*映射并仅使用示例中的部分数据*/
this.items=json.data
.map（用户=>{
返回{
id:user.id，
first\u name:user.first\u name，
姓氏：user.last\u name
}
}))
},
数据（）{
返回{
项目：[]，
字段：['id'、'first\u name'、'last\u name'{
关键：“行动”，
标签：“”
}]
}
},
方法：{
切换详细信息（项目）{
如果（item.\u showDetails）{//如果详细信息已打开，请关闭它们
项目。\u showDetails=false
}else如果（item.details）{//如果详细信息已经存在，则显示详细信息
此.$set（项目“\u showDetails”，真）
}否则{
取回(`https://reqres.in/api/users/${item.id}`）
.then（response=>response.json（））
。然后（json=>{
const user=json.data；
项目.详细信息={
电子邮件：user.email，
化身：user.avatar
}
此.$set（项目“\u showDetails”，真）
})
}
}
}
})

显示细节
{{email}}
您可以使用
引导vue
轻松完成此操作

创建一个在单击“查看详细信息”按钮时被调用的方法，此方法将调用后端并将数据插入到项目中。检索到数据后，将项目上的
\u showDetails
设置为true，这将打开详细信息

您还可以在检索数据时立即打开它并显示加载消息，这取决于您


newvue({
el:“#应用程序”，
创建（）{
//获取初始数据
取（'https://reqres.in/api/users')
.then（response=>response.json（））
。然后（json=>
/*映射并仅使用示例中的部分数据*/
this.items=json.data
.map（用户=>{
返回{
id:user.id，
first\u name:user.first\u name，
姓氏：user.last\u name
}
}))
},
数据（）{
返回{
项目：[]，
字段：['id'、'first\u name'、'last\u name'{
关键：“行动”，
标签：“”
}]
}
},
方法：{
切换详细信息（项目）{
如果（item.\u showDetails）{//如果详细信息已打开，请关闭它们
项目。\u showDetails=false
}else如果（item.details）{//如果详细信息已经存在，则显示详细信息
此.$set（项目“\u showDetails”，真）
}否则{
取回(`https://reqres.in/api/users/${item.id}`）
.then（response=>response.json（））
。然后（json=>{
const user=json.data；
项目.详细信息={
电子邮件：user.email，
化身：user.avatar
}
此.$set（项目“\u showDetails”，真）
})
}
}
}
})

显示细节
{{email}}
感谢您的回复，它工作得非常好。除了我需要在我的表数据特性中添加一个东西之外。“注意：如果直接在项目数据上操作_showDetails属性（即不通过toggleDetails函数引用），则_showDetails必须正确存在于项目数据中，以便对其值的更改进行正确的反应检测。阅读有关Vue反应性限制的更多信息。”您还可以使用
Vue.set（…）
或
this.$set（…）
方法，以确保在
\u showDetails
属性上启用反应性。@Balaram26如Troy所述，如果您使用
此。$set（…）
正如我在代码片段中所做的那样，
\u showDetails
不需要预先存在于表数据上。感谢您的回复，它工作得非常好。除了我需要在我的表数据功能中添加一件事。”注意：如果直接在项数据上操作_showDetails属性（即，不通过toggleDetails函数引用），项目数据中必须正确存在_showDetails，以便正确检测其值的变化。请阅读有关Vue反应性限制的更多信息。“您也可以使用
Vue.set（…）
或
this.$set（…）
确保在
\u showDetails
属性上启用反应性的方法。@Balaram26如Troy所述，如果您使用
此属性。$set（…）
就像我在代码段中所做的那样，
\u showDetails
不需要预先存在于表数据上。