从父组件异步获取数据值

Question

我有一个带有自定义日期时间选择器的Nuxt.js / VuetifyJs应用程序，应该从父组件以这种方式调用它：

<template>
  <div>
    <datetime-picker v-model="datetime1" />
    {{ datetime1 }}
  </div>
</template>

<script>
import DatetimePicker from '@/components/DatetimePicker.vue'
export default {
  components: { DatetimePicker },
  data () {
    return {
      datetime: '2020-01-11 11:12:10',
      datetime1: ''
    }
  }
}
</script>

输出看起来像这样：

无论我使用datetime1还是datetime变量（一个为null，另一个被设置），我的组件都表现出预期的效果。

问题是，在我的实际应用程序中，datetime1在开头为null，因为我是从API异步获取的。但是，一旦获取了它，我就可以从子组件中进行控制台日志记录，但是无法在上面的屏幕截图中看到的文本字段中显示它。

一旦获取datetime1的值，如何在文本字段上显示它？

这是子（自定义）日期时间选择器组件的代码：

 <template>
  <v-container>
    <v-dialog
      ref="dateDialog"
      v-model="dateModal"
      :return-value.sync="date"
      width="auto"
      max-width="290px"
      persistent
    >
      <template v-slot:activator="{ on }">
        <v-text-field
          ref="dateTime"
          v-model="dateTime"
          v-on="on"
          label="Birthday"
          prepend-icon="event"
        />
      </template>
      <v-date-picker v-model="date" color="green lighten-1" scrollable>
        <v-spacer />
        <v-dialog
          ref="timeDialog"
          v-model="timeModal"
          :return-value.sync="date"
          width="auto"
          max-width="290px"
          persistent
        >
          <template v-slot:activator="{ on }">
            <v-btn v-on="on" text>
              OK
            </v-btn>
          </template>
          <v-time-picker v-model="time" color="green lighten-1" scrollable>
            <v-spacer />
            <v-btn @click="update" text>
              OK
            </v-btn>
          </v-time-picker>
        </v-dialog>
      </v-date-picker>
    </v-dialog>
  </v-container>
</template>

<script>
import moment from 'moment'

export default {
  name: 'CustomDatetimePicker',
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      dateModal: false,
      timeModal: false,
      date: this.value ? moment(this.value).format('YYYY-MM-DD') : '',
      time: this.value ? moment(this.value).format('HH:mm') : '',
      switch1: false
    }
  },
  computed: {
    dateTime () {
      return this.date + ' ' + this.time
    }
  },
  methods: {
    hideModals () {
      this.dateModal = false
      this.timeModal = false
    },
    update () {
      this.hideModals()
      this.$emit('input', this.dateTime)
      this.$emit('save', this.dateTime)
    }
  }
}
</script>

任何提示都值得赞赏。

为此[Github repository。

Answer 1

为什么不先显示条件，请参见下面的代码

<datetime-picker v-model="datetime1" v-if="datetime1 != ''"/>