在 VueJS 中为表的映射数组制作自定义函数答案

【问题标题】：Making a custom function for a mapped array in VueJS for a table在 VueJS 中为表的映射数组制作自定义函数
【发布时间】：2021-04-11 19:00:08
【问题描述】：

我正在 VueJS 的引导表中显示和正确排序数据。

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

当我试图在方法中声明一个函数时，我不断收到以下错误： [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
      
    },}

【问题讨论】：

标签： javascript vue.js bootstrap-vue

【解决方案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$&");
}

但也许给它一个更有说服力的名字;-)

【讨论】：

【解决方案2】：

你不能在一个值上调用一个 vue 方法。

以值作为参数调用方法：

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

【讨论】：