时间戳

首页 > 解决方案 > 如何在显示前更改 x-bind:value - Alpine JS

javascript - 如何在显示前更改 x-bind:value - Alpine JS

问题描述

<div x-data="{ date : false }">
      <input type="date" name="dateOne" id="dateOne" x-model="date">
      <input type="date" name="dateTwo" id="dateTwo" x-bind:value="date">
</div>

现在，我该如何更改#dateTwo，所以一旦#dateOne 发生更改，我会提前一天显示#dateTwo，我已经知道要创建一天并在JavaScript 中再添加一个。但我的麻烦在于如何将它与 Alpine JS 粘合在一起的逻辑。

场景：有一个事件有一个开始和一个结束日期，但我想强制使用至少提前一天选择。所以我的想法是这样的，只要用户在第一个输入上选择一天，第二个输入上的 x-bind 就会添加并显示前一天

提前致谢。

标签： javascripthtmlalpine.js

解决方案

模型/数据缺少几个值，我的方法与您的方法有些不同，我认为x-model第一次约会不需要，在第二次约会中使用更有意义。以下是针对您的用例的快速而肮脏的解决方案：

<div x-data="{ 
  dateStart: null,
  dateEnd: null,
  initEndDate: function(dateStartInputValue) {
    const selectedDate = new Date(dateStartInputValue); 
    const dateEndInitValue = selectedDate.setDate(selectedDate.getDate() + 1);
    this.dateEnd = new Date(dateEndInitValue).toISOString().split('T')[0];
  }
}">
  <label for="start">
    Start date:
    <input 
      name="dateStart" 
      type="date" 
      @change="dateStart = event.target.value; initEndDate(event.target.value)" 
    />
  </label>
  <label for="dateEnd" x-show="dateStart">
    – End date:
    <input 
      name="dateStart" 
      type="date" 
      x-model="dateEnd"
      @change="dateEnd = event.target.value;" 
    />
  </label>
</div>

这是沙箱中的代码。

祝你好运！

推荐阅读