Vuejs2 如何在包含数据的表中显示json文件中的特定字段？

我有大约300张这样的唱片。现在，它将显示表中的所有项目。我只想知道你的名字， 蛋白质和kcal将显示在我的表格中。我该怎么做？我正在从API获取列表

[
   {
      "id":"711113fb-c3d1-46db-9f08-737a66ba643d",
      "name":"Banana",
      "fats":"0.2",
      "carbohydrates":"11.8",
      "proteins":"0.8",
      "kcal":"46",
      "tags":[
         
      ],
      "tag_ids":[
         
      ],
      "diet_phases":[
         
      ],
      "diet_phase_ids":[
         
      ],
      "product_group_id":"1cad5993-78f8-43b0-a0c5-f6f88fdf53b8",
      "product_group_name":"Fruits"
   },

This.items是一个数组，用于保存我的表中的项

挂载：

this.fetchProducts（）。然后（（）=>{this.items=this.productList；}）；}

…映射操作({
fetchProducts:“产品/提取”，}）

仍然缺少组件的模板部分，我不知道引导vue表。因此，我假设您的
this.items
只渲染了item对象的每个键。
因此，如果希望控制JS代码中呈现的内容，而不是模板中呈现的内容，则可以使用函数。因此，您可以这样做，而不是直接将其分配给
this.items
：

this.items = this.productList.map((item) => {
    return {
        name: item.name,
        proteins: item.proteins,
        kcal: item.kcal,
    };
});

您没有显示当前实际呈现表的方式，但是您可以轻松地循环记录，然后只呈现所需字段的
。或者您可以使用这个漂亮的表组件：我已经说过，我在数组中呈现项
this.items:[]
，我使用的是引导vue表组件。
actions: {
    fetch({ commit }) {
      return api.products.list({}).then(({ data }) => {
        commit(SET_LIST, data.results);
      });
    },

this.items = this.productList.map((item) => {
    return {
        name: item.name,
        proteins: item.proteins,
        kcal: item.kcal,
    };
});