根据选择输入更改链接 URL

Question

使用最新的 alpine.js 构建，我有兴趣在 Laravel 中构建一个看起来像这样微不足道的选择输入：

{{ Form::select('dogs', $dogs) }}

以上是使用LaravelCollective HTML封装方便表单搭建。

Now, when one of the options above is selected, I want the value currently selected to update the anchor tag below:

<a href="{{ route('dog', ['dog'=>$selectedDog]) }}">Pet Dog</a>

我有一个存根 href 属性，但我希望它动态更新，我相信在这里使用某种 alpine.js 绑定会起作用。

使用x-on for else选项会更新，然后在href for href for href？解决此问题的正确方法是什么，以便根据当前选择的选项更新 URL？

Answer 1

您的建议是正确的：您想绑定href 属性，以便它初始化到当前路由，但您还希望能够更新它。为此，您需要 x-data（Alpine.js 状态）上的 url 属性。

这一切看起来像下面这样：

<a 
  x-data="{ url: '{{ route('dog', ['dog'=>$selectedDog]) }}' }"
  href="{{ route('dog', ['dog'=>$selectedDog]) }}"
  x-bind:href="url"
>
  Pet Dog
</a>

在select 方面，您需要使用x-on:change 获取任何更改，然后您需要使用自定义事件进行广播。在 Alpine.js 中，这可以使用 $dispatch 来完成。

在原始 HTML 中你会这样做：

<select x-on:change="$dispatch('selection-change', { value: $event.target.value })">
  <option value="first-option">First option</option>
</select>

可以映射到 LaravelCollective HTML：

{{ Form::select('dogs', $dogs, ['x-on:change' => '$dispatch("selection-change", { value: $event.target.value })'] }}

最后，您需要在 a 中处理 selection-change 自定义事件，使用 x-on:selection-change.window 或 x-on:selection-change.document (.window/.document 将侦听器附加到窗口或文档而不是指令所在的元素/属性放置）。您可能希望根据value 计算新的url 和text。

<a 
  x-data="{ url: '{{ route('dog', ['dog'=>$selectedDog]) }}', selectedDog: '{{ $selectedDog }}' }"
  href="{{ route('dog', ['dog'=>$selectedDog]) }}"
  x-on:selection-change.window="
    url = url.replace(selectedDog, $event.detail.value);
    selectedDog = $event.detail.value;
  "
  x-bind:href="url"
>
  Pet Dog
</a>