Vue组件模板onload事件调用的refresh函数未被解释器识别问题

核心错误点 #

• 事件绑定规则错误：普通div元素本身不支持原生onload事件，且Vue模板中绑定事件需使用@事件名语法，不能直接写原生onxxx属性，写了也会被Vue编译逻辑忽略。
• 函数作用域错误：refresh函数定义在export default组件导出对象外部，不属于组件实例成员，模板和组件内部都无法直接调用，因此ESLint会提示函数定义后未被使用。
• DOM操作时机错误：直接使用document.getElementById获取DOM时，若调用时机早于组件挂载完成，会返回null导致操作失败，且Vue不推荐直接操作原生DOM，优先使用ref绑定获取组件内DOM元素。
• Props定义不符合规则：props的声明仅可指定构造函数作为类型，你写的startDate: new Date()是实例而非类型，会导致props校验失败，正确的默认值需要通过default字段指定。

修正后的完整代码 #

<template>
  <div class="kalender">
    <h1>{{ msg }}</h1>
    <div id="calendarbody">
        <div id="month">
            <button id="current">aktuelles Datum</button>
        </div>
        <div ref="days" id="days"></div>
    </div>
    <div id="messages"></div>
  </div>
</template>

<script>
export default {
  name: 'kalender',
  props: {
    msg: String,
    startDate: {
      type: Date,
      default: () => new Date()
    }
  },
  mounted() {
    // 组件挂载完成后调用刷新方法，此时DOM已渲染完成
    this.refresh(this.startDate)
  },
  methods: {
    refresh(date) {
      const month = date.getMonth();
      const year = date.getFullYear();
      // 通过ref获取组件内的DOM元素，避免id冲突
      const days = this.$refs.days;
      const prevmonthDays = 2;
      const curmonthDays = 31;
      const nextmonthDays = 2;
      let day = null;
      let m = 0;

      for (m = 1; m < prevmonthDays; m++) {
          day = document.createElement("div");
          day.className = "day";
          day.innerHTML = m;
          day.id = "" + m + month + year;
          days.appendChild(day);
      }

      for (m = 1; m < curmonthDays; m++) {
          day = document.createElement("div");
          day.className = "day";
          day.innerHTML = m;
          day.id = "" + m + month + 1 + year;
          day.style.color = '#006600';
          days.appendChild(day);
      }

      for (m = 1; m < nextmonthDays; m++) {
          day = document.createElement("div");
          day.className = "day";
          day.innerHTML = m;
          day.id = "" + m + month+2 + year;
          day.style.color = '#666666';
          days.appendChild(day);
      }
    }
  }
}
</script>

<style scoped>
h3 {
  margin: 40px 0 0;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}

.day {
    width: 96px;
    height: 90px;
    background-color: aqua;
    border: solid grey;
    color: dimgrey;
    font-size: 48px;
    align-content: center;
}

#days {
    display: flex;
    width: 700px;
    flex-wrap: wrap;
    position: absolute;
    left: 25%;
    top: 300px;
}
</style>

优化建议 #

• 后续可以把日历日期数据存放到组件的data选项中，通过v-for指令直接渲染日期格子，完全不用手动操作DOM，更符合Vue数据驱动的开发模式。
• 月份天数可以通过JS原生Date API动态计算，不用硬编码31天，适配不同月份的天数差异。

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