我正在使用Bootstrap-Vue和VueJs,需要帮助从多个数据对象进行一些自定义数据渲染,并将数据显示到表中。具体来说,我遵循Bootstrap-Vue TABLE文档的这一部分:https://bootstrap-vue.js.org/docs/components/table#formatter-callback但我不确定如何将其应用于我的代码。
这是我的场景:
我有一个数据API提供2个不同的对象数组:帖子
和名称
帖子:
[
{
"userId": 1,
"id": 1,
"title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
"body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
},
...snip..
]
姓名:
[{"userId":1,"first_name":"Neill","last_name":"Dexter","email":"ndexter0@thetimes.co.uk"},
...snip
]
posts
数组包含一个userId
键,但没有用户名。names
数组包含该用户的userId
键和first\u name
和last\u name
。
我想做的只是在我的引导vue表组件中显示用户的全名,而不是userId
,因为仅仅显示userId没有意义。
这是我的尝试(链接到可编辑的实时代码):
<template>
<div>
<b-table :items="posts" :fields="fields">
<!-- A custom formatted column -->
<template slot="name" slot-scope="data">{{ data.value.userId }}</template>
</b-table>
</div>
</template>
<script>
import axios from "axios";
export default {
data() {
return {
posts: [],
names: [],
// key name is the slot name
fields: [
{ key: "id" },
{ key: "title" },
{ key: "body" },
{ key: "name", label: "Assigned To", formatter: "assignNames" }
]
};
},
created() {
this.getPosts();
this.getNames();
},
methods: {
getPosts() {
axios.get("https://jsonplaceholder.typicode.com/posts").then(resp => {
this.posts = resp.data;
});
},
getNames() {
axios
.get("https://my.api.mockaroo.com/users.json?key=f119e0f0")
.then(resp => {
this.names = resp.data;
});
},
assignNames() {
var i;
for (i = 0; i < this.posts.length; i++) {
if (this.posts[i].userId !== null) {
const result = this.names.filter(name => {
return name.userId === this.posts[i].userId;
});
this.posts[i].userId =
result[0].first_name + " " + result[0].last_name;
}
}
}
}
};
</script>
有人知道如何显示用户的全名而不仅仅是用户名吗?谢谢
assignNames(id) {
const user = this.names.find(e => e.userId === id);
return user ? `${user.first_name} ${user.last_name}` : 'loading...';
}
... 但是,很明显,密钥必须是userId
,因为这是post
结构中引用的属性的名称:
{ key: "userId", label: "Assigned To", formatter: "assignNames" }
看这里。
此外,您不应该命名来自第二个api的结果名称
,而应该命名用户
。
注意:在我链接的示例中,我将users
的结果放在项目中保存的json中,并通过promise获得该json来模拟api调用,因为您的api密钥超过了其每日限制,并且返回了500
。
我正在编写一组定制的PrimeFaces组件,使用PrimeFaces5.0,并在JBoss EAP6.2中运行。 null 2.2在myFaceStest.taglib.xml中,我定义了输入标记: 2.3在input.java(我的自定义组件)中,我执行以下操作: 2.4此组件的呈现器包含以下内容: 给定这种设置,为什么自定义组件不会呈现?我的jboss日志中没有任何内容,即使日志级别设置为d
我有一个包含数据的表,我想在其中添加一个页脚,以便累加并显示每行中int值的总和。 我尝试了以下代码。 我的表格如下: 我的Vue数据 我现在得到的只是一个反映页眉的页脚。 这是在引导Vue自定义头文档之后编写的,但在细节上非常粗略,没有提供如何添加真正自定义信息的真实信息。我只想我的模板显示在页脚。 编辑:好吧,我确实弄明白了以下几点。还是不是我想要的。 我意识到Bootstrap-Vue设置的
我正在尝试使用composition API创建Vue 3组件库: https://github.com/hyperbotauthor/vue3complib 在其中一个组件中,我想导入另一个组合API组件(https://github.com/hyperbotauthor/vue3complib/blob/main/src/components/ChessboardExt.vue): 这几乎是可
问题内容: 我的应用程序正在使用JSoup下载留言板页面的HTML(在这种情况下,它是包含给定线程帖子的页面)。我想使用此HTML,去除不需要的项目,并应用自定义CSS对其进行样式设置使其在WebView中“可移动”。 我应该在处理样式时将样式注入HTML中(因为无论如何还是要处理样式),还是有一种很好的方法将CSS文件添加到我的应用程序资产中并简单地引用它。我认为后者将是理想的,但不确定如何实现
我在react native 0.62上工作,我在其中使用了抽屉导航器。当用户登录到应用程序时,我将auth api响应存储到redux存储中。登录后,我想在仪表板头显示登录的用户名,但我无法使用redux存储在我的函数。用钩子试过,但不起作用。任何帮助或建议。提前谢谢你。下面是我的代码: login.reducer.js从'../utility/constants'导入{AUTH_REQUEST
本文向大家介绍如何在jQuery中实现自定义事件?,包括了如何在jQuery中实现自定义事件?的使用技巧和注意事项,需要的朋友参考一下 自定义事件意味着您可以在jQuery中创建自己的事件。例如,创建一个自定义事件以在按下键盘上的任意键时触发警报框。 示例 您可以尝试运行以下代码以了解如何创建自定义事件,