在 VueJS 中为 table 的映射数组制作自定义函数

Question

我正在努力在 VueJS 的 bootstrap table 中显示和正确排序数据。

我正在尝试将数组中的日期格式从 2010 年 1 月 21 日格式替换为 MM/DD/YYYY 格式，以便可以按 bootstrap table 正确排序。来自 API 的数组具有多个值，这些值连接在一起以填充 table 中的一个单元格。为了做到这一点，我一直在映射数组上使用连接函数。对于日期字段，因为只有一个值，所以我不想加入，而是想创建一个自定义函数来更改日期格式，如前所述。 2010 年 1 月 21 日至 01/21/2010。我正计划在方法中对此进行硬编码。

当我尝试在方法中声明一个函数时，我不断收到以下错误： [Vue 警告]：渲染错误：“TypeError：item.LastUpdatePostDate.newFunction 不是函数” 我将如何解决这个问题？这是一种非常低效的更改日期的方法吗？

computed: {
    mappedItems() {
      return this.items.map((item) => {
        return {
          Ids: item.Ids.join(""),
          Acronyms: item.Acronyms.join(", "),
          LastUpdatePostDate: item.LastUpdatePostDate.newFunction(),
        };
      });
    },
    
  },
  methods: {
    newFunction: function () {
      
      return arguments
      
    },}

Answer 1

值 item.LastUpdatePostDate 是一个字符串...它没有 newFunction 方法。 newFunction 方法可通过 this.newFunction 使用，您应该将日期字符串作为参数传递：

LastUpdatePostDate: this.newFunction(item.LastUpdatePostDate),

newFunction 本身可能如下所示：

newFunction: function (dateString) {
    let [monthName, day, year] = dateString.match(/\w+/g);
    let month = "JanFebMarAprMayJunJulAugSepOctNovDec".indexOf(monthName.slice(0, 3)) / 3 + 1;
    return `${day}/${month}/${year}`.replace(/\b\d\b/g, "0$&");
}

但也许给它起一个更能说明问题的名字 ;-)

Answer 2

您不能对值调用 vue 方法。

以值作为参数调用方法：

...
    LastUpdatePostDate: this.newFunction(item.LastUpdatePostDate),
...
newFunction(date) {
    // do stuff with date
    return newvalue
}
....

在 VueJS 中为 table 的映射数组制作自定义函数

Making a custom function for a mapped array in VueJS for a table

javascript

vue.js

bootstrap-vue