为何无法通过v-model为datetime-local日期选择器设置值？

嘿，我来帮你搞定这个问题～你遇到的核心问题是**datetime-local输入框的格式要求和你提供的end值格式不匹配**。

问题原因 #

HTML的datetime-local类型输入框有严格的格式规范：它只接受不带时区信息、精确到分钟的字符串，格式必须是 YYYY-MM-DDTHH:mm（比如2021-03-03T20:20）。而你定义的end值是"2021-03-03T20:20:00Z"，带有秒数和时区标识Z，这完全不符合输入框的格式要求，所以输入框无法识别并渲染这个值。不过Vue模板里的{{ end }}只是直接输出字符串内容，所以能正常显示。

两种解决方案 #

方案1：直接修改初始值格式

如果你的初始值是固定的，直接把end的格式调整为输入框要求的形式即可：

var example1 = new Vue({
  el: '#example-1',
  data: {
    end: "2021-03-03T20:20", // 去掉秒数和时区标识Z
  }
})

方案2：用计算属性动态转换格式（推荐用于动态获取的日期）

如果你的日期值是从后端接口获取的ISO格式字符串，或者需要双向绑定同步原数据，推荐使用计算属性来做格式转换：

var example1 = new Vue({
  el: '#example-1',
  data: {
    end: "2021-03-03T20:20:00Z",
  },
  computed: {
    formattedEnd: {
      // 读取时转换为输入框需要的格式
      get() {
        // 截取ISO字符串的前16位，刚好是YYYY-MM-DDTHH:mm格式
        return this.end.slice(0, 16);
      },
      // 输入框值变化时，把格式转回原数据需要的ISO格式
      set(val) {
        this.end = `${val}:00Z`;
      }
    }
  }
})

对应的HTML也要修改为绑定计算属性：

<div class="mb-3">
  <label for="waterEnd">End (date and time):</label>
  <input v-model="formattedEnd" class="form-control" type="datetime-local" id="waterEnd" name="waterEnd">
</div>

额外提示 #

如果你的end是一个Date对象而不是字符串，可以用toISOString()方法先转换为字符串，再截取前16位：

// 假设end是Date对象
get() {
  return this.end.toISOString().slice(0, 16);
}

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