在 bootstrapvue 上向从 REST API 接收的 json 数据添加格式化程序功能

Question

我从 REST API 接收到以下 json 数据到我的 bootstrap-vue vue.js v2.6 应用程序。

{
    "fields": [
        {
            "key": "name",
            "label": "name",
            "sortable": true
        },  
        {
            "key": "item1",
            "label": "item1",
            "sortable": true
        },
        {
            "key": "item2",
            "label": "item2",
            "sortable": true            
        },
        {
            "key": "item3",
            "label": "item3",
            "sortable": true
        }
    ],
    "items": [
        {
            "name": "Field name 1",
            "item1": -0.05,
            "item2": -0.06,
            "item3": -0.07
        },
        {
            "name": "Field name 2", 
            "item1": -0.01,
            "item2": -0.02,
            "item3": -0.03
        },
        {
            "name": "Field name 3", 
            "item1": -0.05,
            "item2": -0.06,
            "item3": -0.07
        }
    ]
}

我想为此 json 数据添加格式化程序功能。它看起来像这样；

{
    "fields": [
        {
            "key": "name",
            "label": "name",
            "sortable": true
        },  
        {
            "key": "item1",
            "label": "item1",
            "sortable": true
        },
        {
            "key": "item2",
            "label": "item2",
            "sortable": true,
            "formatter": "value => { return (value + '%')}"
        },
        {
            "key": "item3",
            "label": "item3",
            "sortable": true
        }
    ],
    "items": [
        {
            "name": "Field name 1",
            "item1": -0.05,
            "item2": -0.06,
            "item3": -0.07
        },
        {
            "name": "Field name 2", 
            "item1": -0.01,
            "item2": -0.02,
            "item3": -0.03
        },
        {
            "name": "Field name 3", 
            "item1": -0.05,
            "item2": -0.06,
            "item3": -0.07
        }
    ]
}

这是我为此编写的 Vue.js 代码；

<template>
  <div class="container">
    <h1 class="pt-2 pb-3">Bootstrap Table</h1>
    <b-table striped hover :items="items" :fields="fields" primary-key></b-table>
  </div>
</template>

<script>

async function axiosGetRequest(url) {
  const axios = require("axios");  
  let res = await axios.get(url);

  return res.data;
}

export default {  
  data: data_init,
  mounted: function() {
      let url = "http://localhost:8080/temp.json";     
      
      axiosGetRequest(url).then((res) => {
        this.fields = amend_fields(res.fields);
        this.items = res.items;
        console.log(this.fields);
      });        
  },
};

function data_init() {  
  
  let init_data = {};
  init_data.fields = {};
  init_data.items = {};

  return init_data;
}

// amend fields object
function amend_fields(fields) {   
  let new_fields = {}; 
  new_fields = fields;
  new_fields[2]["formatter"] = "value => {return (value + '%')}"; 

  return new_fields;
}

</script>

不幸的是，代码似乎不起作用。没有错误信息。如果有效，我会看到一个百分号作为后缀添加到 BootstrapVue 创建的 table 中的 item2 列。但是，我看不到这一点。这是我看到的。

有人知道我的代码有什么问题吗？

我正在使用 vue.js v2.6 和 BootstrapVue。

Answer 1

如果目标是在 BootstrapVue 创建的 table 中的 item2 列中添加百分号作为后缀，则可以通过其他方式实现。

在 javascript 代码中定义 fields。从 REST API json 数据中只读取 items 中的数据。

事实上，API 定义 table 中的 fields 的外观是不寻常的。 API 设计师怎么会知道这些？此信息应在您自己的代码中定义。从 API.

中提取 fields 是错误的架构

修改后的代码如下所示。

<template>
  <div class="container">
    <h1 class="pt-2 pb-3">Bootstrap Table</h1>
    <b-table striped hover :items="items" :fields="fields" primary-key></b-table>
  </div>
</template>

<script>

async function axiosGetRequest(url) {
  const axios = require("axios");  
  let res = await axios.get(url);

  return res.data;
}

export default {  
  data: data_init,
  mounted: function() {
      let url = "http://localhost:8080/temp.json";   
      
      axiosGetRequest(url).then((res) => {
        //this.fields = amend_fields(res.fields); //Don't read fields data from REST API. Define yourself.
        this.items = res.items;
        console.log(this.fields);
      });        
  },
};

function data_init() {  
  
  let init_data = {};
  init_data.fields = [
        {
            "key": "name",
            "label": "name",
            "sortable": true
        },  
        {
            "key": "item1",
            "label": "item1",
            "sortable": true
        },
        {
            "key": "item2",
            "label": "item2",
            "sortable": true,
            "formatter": "value => { return (value + '%')}"
        },
        {
            "key": "item3",
            "label": "item3",
            "sortable": true
        }
    ];
  init_data.items = {};

  return init_data;
}

</script>

Answer 2

当formatter field是一个字符串时，该字符串必须是函数的名称，而不是函数本身的字符串值。

对于您的情况，只需从 formatter 值中删除引号：

// "formatter": "value => { return (value + '%')}" ❌ don't use a string
"formatter": value => { return (value + '%')} ✅

demo

在 bootstrapvue 上向从 REST API 接收的 json 数据添加格式化程序功能

Add formatter function to json data received from REST API on bootstrapvue

javascript

vue.js

vuejs2

bootstrap-vue