如何以正确的格式发出 momentjs 日期

Question

我正在尝试格式化我的数据以将其发送到父组件，但它似乎不是响应式的

      if(this.selectedDate !== '' && this.selectedMonth !== '' && this.selectedDate !== '' ){
    this.$emit("emit-data",  this.selectedYr+"-"+moment().set(this.selectedDate) .format("DD")+"- "+moment().set(this.selectedMonth).format("MM"))
  }

它不会发送选定的下拉菜单，而是发送在页面加载时预先选择的默认下拉菜单。但是如果我从正在发送的数据中删除moment() 格式，它会发送正确的值，但我仍然需要该格式的数据，例如YYYY-DD-MM

有没有办法在发射之前使用 setter 和 getter 计算？我不确定如何，但如果有办法？

Answer 1

是的，您绝对可以为此使用响应式计算 getter。这是一个例子：

<div id="app">
  <parent-component />
</div>

const parentComponent = Vue.component('parent-component', {
  data () {
    return {
      formattedDate: null
    }
  },
  template: `
    <div>
      <p>You have selected: {{ formattedDate || "nothing yet" }}.</p>

      <child-component
        @emit-data="(payload) => formattedDate = payload"
      />
    </div>
  `
})

const childComponent = Vue.component('child-component', {
  data () {
    return {
      selectedDate: null,
      selectedMonth: null,
      selectedYear: null
    }
  },
  computed: {
    formattedDate () {
      if (![this.selectedDate, this.selectedMonth, this.selectedYear].every((el) => el)) return null
      
      return moment({
        day: this.selectedDate,
        // Months in Moment.js are 0-indexed!
        month: this.selectedMonth - 1,
        year: this.selectedYear
      }).format("YYYY-DD-MM")
    }
  },
  watch: {
    formattedDate (newVal) {
      this.$emit("emit-data", newVal)
    }
  },
  template: `
    <div>
      <input v-model="selectedDate" type="number" placeholder="Day" min="1" max="31" step="1">
      <input v-model="selectedMonth" type="number" placeholder="Month" min="1" max="12" step="1">
      <input v-model="selectedYear" type="number" placeholder="Year" min="1900" max="2100" step="1">
    </div>
  `
})

new Vue({
  el: "#app"
})

您可以在https://jsfiddle.net/46vuLcy0/ 上以交互方式运行上述内容。

Answer 2

试试

this.$emit('emit-data', moment(new Date(this.selectedMonth + "-" + this.selectedDate + "-" + this.selectedYr)).format(YYYY-DD-MM))

你也可以看到这些examples

更新

在上面的代码中，您的数据被处理到moment 日期。可以将结果格式化为您想要的格式。

示例

如果你希望日期是15-JUL-2020，你可以有

moment(/* your date */).format('DD-MMM-YYYY')

你可以直接提供给点赞

this.$emit("emit-data", moment(this.selectedYr + "-" + this.selectedDate + "-" + this.selectedMonth).format("YYYY-DD-MM"))

根据格式，代码将产生类似2020-15-07 的结果。