Vue.js 如何在引导Vue表组件中呈现自定义数据？

我正在使用引导Vue和VueJs，需要一些来自多个数据对象的自定义数据渲染和将数据显示到表中的帮助。具体来说，我遵循引导Vue表文档的这一部分：但我不确定如何将其应用到我的代码中

以下是我的设想：

我有一个数据API，它提供了两种不同的对象数组：

posts

和

names

职位：

姓名：

posts

数组包含一个

用户ID

键，但没有用户名称。

名称

数组包含该用户的

用户名

键和

姓

我想做的只是在我的引导vue表组件中显示用户的全名，而不是

userId

，因为仅仅显示userId没有意义。

以下是我的尝试（）：

{{data.value.userId}
从“axios”导入axios；
导出默认值{
数据（）{
返回{
员额：[]，
姓名：[]，
//key name是插槽名称
字段：[
{key:“id”}，
{key:“title”}，
{key:“body”}，
{键：“名称”，标签：“分配给”，格式化程序：“分配名称”}
]
};
},
创建（）{
这是getPosts（）；
这是getNames（）；
},
方法：{
getPosts（）{
axios.get（“https://jsonplaceholder.typicode.com/posts）然后（resp=>{
this.posts=resp.data；
});
},
getNames（）{
axios
.get（“https://my.api.mockaroo.com/users.json?key=f119e0f0")
。然后（resp=>{
this.names=resp.data；
});
},
转让名称（）{
var i；
对于（i=0；i{
返回name.userId==this.posts[i].userId；
});
this.posts[i].userId=
结果[0]。名字+“”+结果[0]。姓氏；
}
}
}
}
};

有人知道如何显示用户的全名而不仅仅是用户名吗？谢谢

分配名称（id）{
const user=this.names.find（e=>e.userId==id）；
返回用户？`${user.first\u name}${user.last\u name}`:'正在加载…'；
}

。。。但是，很明显，密钥必须是

userId

，因为这是

post

结构中引用的属性的名称：

{ key: "userId", label: "Assigned To", formatter: "assignNames" }

看到了

此外，您不应该命名来自第二个api的结果

名称

，而应该命名

用户

---

---

注意：在我链接的示例中，我将

用户的结果

放在项目中保存的json中，并通过承诺获得该json来模拟api调用，因为您的api密钥超出了其每日限制，并且返回了

500

，不幸的是，您的用户API超出了每日限制，现在返回

500

。您可能希望创建一个新帐户，获取虚拟数据，将其保存为项目中的json，并模拟对它的http请求。请注意您当前处理获取数据的方式，编辑器中的任何更改都将导致应用程序重新生成和重新蚀刻。非常感谢。我会研究这个。快速问题…在浏览器中使用

find（）

方法安全吗？我发现它与IE11和更早版本不兼容。要在IE中使用它，您需要它的。或者（它们实际上可能是完全相同的东西）。如果我使用vue cli，它是否随polyfill一起提供？花了我一段时间，但我让它处理我的实际数据。非常感谢。我注意到该表没有过滤自定义格式化程序数据…我必须对此进行研究。

[{"userId":1,"first_name":"Neill","last_name":"Dexter","email":"ndexter0@thetimes.co.uk"},
...snip
]

<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>

{ key: "userId", label: "Assigned To", formatter: "assignNames" }