Vue2中如何将date-picker的值传递到hidden input？

先修正原代码的核心问题 #

1. ID重复冲突：你的date-picker和input使用了同一个id="inputDate"，这会导致DOM选择器无法正确定位元素，必须给两者设置不同的唯一ID。
2. 多余的异步语法：watch里的.then(response => {})完全没必要，因为date的变化是同步触发的，不存在异步请求逻辑。
3. 输入框类型错误：你需要的是隐藏输入框，应该把type="text"改成type="hidden"。

方法1：通过watch监听同步（适合需额外处理值的场景） #

如果需要对选择的日期值做格式化或其他处理后再同步到输入框，可使用这种方式：

模板代码

<div id="app">
  <!-- 给日期选择器设置唯一ID -->
  <date-picker 
    type="date" 
    id="datePicker" 
    name="datePicker" 
    format="jYYYY-jMM-jDD" 
    v-model="date"
  ></date-picker>
  
  <!-- 改为隐藏输入框，设置唯一ID -->
  <input type="hidden" name="inputDate" id="hiddenInputDate">
</div>

脚本代码

const app = new Vue({
  el: '#app',
  data: {
    dates: [],
    date: '',
  },
  watch: {
    date(newDate) {
      // 直接获取隐藏输入框并赋值，移除多余的异步逻辑
      const inputDate = document.getElementById('hiddenInputDate');
      inputDate.value = newDate;
      // 如果需要额外处理值，可在这里添加逻辑，比如：
      // inputDate.value = newDate.replace(/-/g, '/');
    }
  },
  components: {
    DatePicker: VuePersianDatetimePicker
  }
});

方法2：直接用v-model绑定（推荐，符合Vue响应式设计） #

这是最简洁的实现方式，无需手动操作DOM，利用Vue的响应式特性自动同步值：

模板代码

<div id="app">
  <date-picker 
    type="date" 
    name="datePicker" 
    format="jYYYY-jMM-jDD" 
    v-model="date"
  ></date-picker>
  
  <!-- 直接绑定同一个data属性，值会自动同步 -->
  <input type="hidden" name="inputDate" v-model="date">
</div>

脚本代码

const app = new Vue({
  el: '#app',
  data: {
    dates: [],
    date: '',
  },
  components: {
    DatePicker: VuePersianDatetimePicker
  }
});

这种方式下，日期选择器和隐藏输入框共享同一个data变量date，当选择器的值变化时，隐藏输入框的值会自动同步，完全不需要额外的监听逻辑。

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