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

Question

<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 就会添加并显示提前一天

提前致谢。

Answer 1

model/data 缺少几个值，我的方法与你的有点不同，我认为我们第一次约会不需要 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>

这是 sandbox.

中的代码

祝你好运！

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

How to change x-bind:value before displaying - Alpine JS

html

javascript

alpine.js