Vue Bootstrap项目拆分合并Datetime字段时遇Cannot set properties of null错误

问题根源 #

代码里有几个关键错误触发了这个报错：

1. moment初始化方式错误：moment('DD/MM/YYYY HH:mm')这种写法不对——moment第一个参数是实际日期字符串，第二个才是格式模板。直接传格式字符串会生成无效的moment对象，后续操作会返回null。
2. 未通过this访问实例属性：created钩子中直接写tenancy.moveInDate，没有加this.，根本拿不到组件实例的data数据。
3. 把moment对象当成数组操作：moveInDate是moment实例，不是数组，this.tenancy.moveInDate[0]这种写法会返回null，自然没法设置属性。
4. 日期拆分逻辑错误：就算moveInDate是字符串，split('')会把每个字符拆成数组元素，完全不是你要的日期、时间拆分方式。

修复后的完整代码 #

<template>
  <div>
    <b-form-row>
      <b-col lg="6">
        <b-form-group :label="$t('Date and time')">
          <date-time-picker
            v-model="tenancy.moveInDate"
            :format="format"
            :show-second="false"
            type="datetime"
          />
        </b-form-group>
      </b-col>
    </b-form-row>

    <b-form-row>
      <b-col lg="6">
        <b-form-group :label="$t('Move in date')">
          <b-date-picker v-model="tenancy.date" />
        </b-form-group>
      </b-col>
    </b-form-row>

    <b-form-row>
      <b-col lg="6">
        <b-form-group :label="$t('Move in time')">
          <b-time-picker v-model="tenancy.time" />
        </b-form-group>
      </b-col>
    </b-form-row>

    <button @click="update">更新</button>
  </div>
</template>

<script>
import moment from 'moment'

export default {
  data() {
    return {
      tenancy: {
        // 初始化有效moment对象，可替换为后端返回的datetime字符串（需配合format解析）
        moveInDate: moment(),
        date: null,
        time: null
      }
    }
  },
  computed: {
    format() {
      return localeOptions[this.$i18n.locale].datepicker.format + ' LT';
    }
  },
  methods: {
    update() {
      // 确保日期和时间都有效再合并
      if (this.tenancy.date?.isValid() && this.tenancy.time?.isValid()) {
        // 从date取日期，从time取时分，合并成完整datetime
        this.tenancy.moveInDate = moment(this.tenancy.date)
          .set({
            hour: this.tenancy.time.hour(),
            minute: this.tenancy.time.minute(),
            second: 0
          })
      }
    }
  },
  created() {
    // 拆分moveInDate为日期和时间字段
    if (this.tenancy.moveInDate.isValid()) {
      // 提取纯日期部分（时间置为0点）
      this.tenancy.date = moment(this.tenancy.moveInDate).startOf('day')
      // 提取时间部分（日期设为固定值，适配时间选择器）
      this.tenancy.time = moment(this.tenancy.moveInDate).set({
        year: 2000,
        month: 0,
        date: 1
      })
    }
  }
}
</script>

核心修复说明 #

• 正确初始化moment：用moment()生成当前时间，若后端返回字符串，用moment(backendStr, 你的格式)解析。
• 必须用this访问实例数据：组件内所有访问data/props的地方都要加this.。
• 用moment API处理日期时间：
  • 拆分：startOf('day')获取纯日期，set重置日期部分保留时间，适配日期/时间选择器的v-model要求。
  • 合并：通过set方法把时间的时分赋值给日期对象，得到完整的datetime。
• 增加有效性校验：操作前检查moment对象是否有效，避免空值引发新错误。

内容的提问来源于stack exchange，提问作者Cphml444