Vuetify v-date-picker中绑定v-model的计算属性为何无法修改日期范围？

所有交互失效的核心原因，完全出在你实现的双向计算属性dateRange的setter逻辑上：

• 计算属性setter的返回值没有任何实际作用。当v-date-picker触发日期选中变更时，会把新的日期数组传入计算属性的setter，你写的set(value) { return value; }既没有修改任何本地响应式状态，也没有向父组件同步更新值，整个setter执行完没有产生任何状态变更。
• 由于setter没有做任何状态更新操作，后续组件依赖计算属性重新求值时，getter永远返回原封不动的this.range prop值。这也是为什么首次加载能正常显示选中值，但点选日期时选择器没有任何响应、看起来“卡死”的原因。
• 对比直接使用本地data变量的正常场景：data中定义的dates是组件本地可读写的响应式状态，v-model本质是“值绑定 + 变更事件触发本地值更新”的语法糖，绑定本地data时，选择器的选中变更能直接修改dates的值，交互自然可以正常运行。

按照Vue的单向数据流规则，不能直接在子组件中修改父组件传入的prop值，结合你组件中已有Cancel、OK按钮的交互逻辑，推荐用本地状态缓存的模式实现：

1. 定义本地响应式变量承接选择器的实时交互值

   data() {
     return {
       localRange: []
     }
   }
   

2. 监听传入的range prop，初始化本地值，保证首次加载和父组件传值保持一致

   watch: {
     range: {
       immediate: true, // 组件首次加载就执行同步逻辑
       handler(newRange) {
         // 做数组拷贝，避免直接引用prop的内存地址
         this.localRange = [...newRange]
       }
     }
   }
   

3. 把v-date-picker的v-model直接绑定到localRange，此时选择器的点选交互会正常更新本地变量。
4. 在按钮回调中处理状态同步逻辑：

   methods: {
     onCancel() {
       // 取消时丢弃本地修改，重新同步回父组件传入的原始值
       this.localRange = [...this.range]
     },
     onSave() {
       // 保存时把本地修改完成的日期值，通过事件抛给父组件
       this.$emit('update:range', this.localRange)
     }
   }
   

补充说明：如果你不需要Cancel、OK的分步交互，想做到子组件选完就实时同步给父组件，也可以修正之前的计算属性写法——setter里必须显式触发事件同步，不能只return值：

dateRange: {
  get() {
    return this.range
  },
  set(value) {
    // 必须显式抛值给父组件，单纯return没有任何作用
    this.$emit('update:range', value)
  }
}

这种写法因为每选一次日期就会立刻同步给父组件，没有暂存中间修改的能力，和你当前组件带确认/取消按钮的交互逻辑不匹配，所以更推荐前面的本地缓存实现方案。

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