將格式化程式函式添加到從bootstrapvue上的RESTAPI接收的json資料

我從 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 創建的表中看到一個百分比符號作為后綴添加到 item2 列。但是，我看不到這一點。這就是我所看到的。

有人知道我的代碼有什么問題嗎？

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

uj5u.com熱心網友回復：

當formatter欄位是字串時，字串必須是函式名，而不是函式本身的字串值。

在您的情況下，只需從值中洗掉引號formatter：

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

演示

uj5u.com熱心網友回復：

如果目標是在 BootstrapVue 創建的表中的 item2 列中添加一個百分號作為后綴，那么這可以通過另一種方式實作。

fields在javascript代碼中定義。僅從itemsREST API json 資料中讀取資料。

實際上，API 定義fields表中的外觀是不尋常的。API 設計人員怎么會知道這一點？此資訊應在您自己的代碼中定義。fields從 API中提取是錯誤的架構。

修改后的代碼如下所示。

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

標籤：javascript Vue.js Vuejs2 引导程序

上一篇：在方法中觸發更改后，Vue3資料未更新

下一篇：如何在KaliLinux上安裝Yarn？