根据 select 输入更改 link URL

Question

使用最新的 alpine.js 构建，我对在 Laravel 中构建的 select 输入感兴趣，它看起来像这样微不足道：

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

以上是使用 LaravelCollective HTML 包装，以便于构建表单。

现在，当上述选项之一被 selected 时，我希望当前 selected 的值更新下面的锚标记：

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

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

在 select 选项更新时使用 x-on，然后可能对 href 使用 x-bind 是否有意义？正确的方法是什么才能使 URL 根据当前 selected 选项进行更新？

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 })'] }}

最后，您需要使用 x-on:selection-change.window 或 x-on:selection-change.document（.window/.document 将侦听器附加到 a 中处理 selection-change 自定义事件window 或文档而不是放置 directive/attribute 的元素）。您可能希望根据 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>

根据 select 输入更改 link URL

Change link URL based on select input

javascript

php

laravel

alpine.js