Javascript拆分在Vue应用程序中不起作用答案

【问题标题】：Javascript split not working in Vue applicationJavascript拆分在Vue应用程序中不起作用
【发布时间】：2020-02-11 19:55:55
【问题描述】：

我是 JS 和 Vue 的新手。我有一个 Vue 应用程序，我从一个开放的 api 获取日期。我试图仅从 api 获取日期，并且请求的资源（例如，2019-10-15T09:17:11.808545+02:00）包含日期和时间。我无法将日期与“TO”的时间分开，希望能在这方面提供一些帮助。这就是我所拥有的：

<template>
    <div class="content">
        {{split_date(this.date)}}
    </div>
</template>

<script>
    export default {
        mounted: function() {
            axios.get("http://worldtimeapi.org/api/timezone/Europe/Berlin", {})
                .then(response => {
                    this.date = response.data.datetime;
                })
                .catch(function(error) {
                    console.log(error);
                });
        },

        data() {
            return {
                date: "",
                separated_date: [],
            };
        },

        methods: {
            split_date(date) {
                this.separated_date = date.split("TO");
                return this.separated_date[0];
            }
        }
    }
</script>

我得到的输出是整个返回的响应：2019-10-15T09:17:11.808545+02:00

我也收到错误：You may have an infinite update loop in a component render function.

【问题讨论】：

不是TO，只是T。您的时间以0 开头，编号为零。
你为什么不用momentjs？
如果你使用 'T0' （零）而不是 'O' 字母的拆分，这不必对 vue.js 做任何事情，你会得到实际的预期结果
@SagarJajoriya 它恰好对我的 Vue 应用程序更安全：D 但感谢您的建议！
无限更新循环是因为您在split_date 内创建了对separated_date 的反应性依赖，然后更新属性值。每次渲染时，它都会用一个新数组更新该值，导致它再次渲染。我建议使用计算属性而不是方法，并从 data 中完全删除 separated_date。

标签： javascript vue.js

【解决方案1】：

这其实不是 Vue 问题，而是 JS 日期/时间处理/解析问题：

const date = new Date('2019-10-15T09:17:11.808545+02:00')

console.log("Date object:", date)

// example date elements:
console.log("Year:", date.getFullYear())
console.log("Month:", date.getMonth() + 1) // JS starts numbering months from 0
console.log("Timestamp:", date.getTime())

// to get YYYY-MM-DD, with leading zeroes
const datetime = `${date.getFullYear()}-${("0" + (date.getMonth() + 1)).slice(-2)}-${("0" + date.getDate()).slice(-2)}`

console.log("YYYY-MM-DD:", datetime)

您可以在此处阅读日期：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date

解决方案

new Vue({
  el: "#app",
  data: {
    split_date: ''
  },
  methods: {
    async getWorldTime() {
      const resp = await fetch('http://worldtimeapi.org/api/timezone/Europe/Berlin')
      const worldTime = await resp.json()
      return await worldTime.datetime
    }
  },
  async mounted() {
    console.log(await this.getWorldTime())
    const date = new Date(await this.getWorldTime())
    this.split_date = `${date.getFullYear()}-${("0" + (date.getMonth() + 1)).slice(-2)}-${("0" + date.getDate()).slice(-2)}`
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">{{split_date}}</div>

【讨论】：

【解决方案2】：

就像其他人在 cmets 中所说的那样，你在 TO 上分裂，而你应该在 T 上分裂。您的时间从0（零号）开始。此外，您不需要将separated_date 保存在data-property 中。您可以使用a computed property 在原始日期更改时自动重新计算separated_date。

请注意：如果您正在使用日期（时间）做很多事情，那么使用库来帮助您并不是最糟糕的主意。流行的库例如 date-fns、Luxon 或 Moment.js

【讨论】：