$dispatch 选择更改事件以更新按钮焦点答案

【问题标题】：$dispatch select change event to update button focus$dispatch 选择更改事件以更新按钮焦点
【发布时间】：2021-02-06 01:45:49
【问题描述】：

您好，我有一个选择元素，我想设置一个按钮，专注于更改。我的代码如下。我已包含 $dispatch 但不确定我是否正确

function data() {
  return {
    open: "tab 1",
    tabs: [
      {
        value: "tab 1",
        text: "Text for tab 1"
      },
      {
        value: "tab 2",
        text: "Text for tab 2"
      },
      {
        value: "tab 3",
        text: "Text for tab 3"
      }
    ]
  };
}

<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js"></script>
<div x-data="data()" x-init="select = open, $watch('select', value => console.log(value))" $watch="('select', value => console.log(select))" class="w-full h-screen bg-gray-200 flex items-center justify-center">
  <div class="flex flex-wrap gap-2">
    <template x-for="btn in tabs" :key="btn.value">
      <button x-on:selectchange=":focus = $event.detail.value === btn.value" x-text="btn.value" @click="open = btn.value, select = btn.value" class="bg-blue-400 px-6 py-4 rounded-sm border-b-4 border-blue-800 uppercase tracking-widest font-bold " :class="{'bg-blue-800 text-blue-300' : btn.value === open}">toggle</button>
    </template>
    <div class="w-full">
      <form action="">
        <select class="w-full appearance-none px-6 py-4 border border-blue-800 rounded-sm" name="" id="" x-model="select">
          <template x-for="opt in tabs" x-on:change="$dispatch='selectchange',{value:opt.value}" :key="opt.value">
            <option x-text="opt.value"></option>
          </template>
        </select>
      </form>
    </div>
    <div>
      <template x-for="txt in tabs">
        <p x-text="txt.text" x-show="open === txt.value"></p>
      </template>
    </div>
  </div>
</div>

提前致谢

【问题讨论】：

标签： alpine.js

【解决方案1】：

$dispatch 是您需要调用的函数。您还想使用 ref 以便轻松聚焦按钮。

<div x-data="data()" x-init="select = open, $watch('select', value => console.log(value))" $watch="('select', value => console.log(select))" class="w-full h-screen bg-gray-200 flex items-center justify-center">
  <div class="flex flex-wrap gap-2">
    <template x-for="btn in tabs" :key="btn.value">
      <button x-ref="button" x-on:selectchange.window="$refs.button.focus()" x-text="btn.value" @click="open = btn.value, select = btn.value" class="bg-blue-400 px-6 py-4 rounded-sm border-b-4 border-blue-800 uppercase tracking-widest font-bold " :class="{'bg-blue-800 text-blue-300' : btn.value === open}">toggle</button>
    </template>
    <div class="w-full">
      <form action="">
        <select class="w-full appearance-none px-6 py-4 border border-blue-800 rounded-sm" name="" id="" x-model="select">
          <template x-for="opt in tabs" x-on:change="$dispatch('selectchange', {value:opt.value})" :key="opt.value">
            <option x-text="opt.value"></option>
          </template>
        </select>
      </form>
    </div>
    <div>
      <template x-for="txt in tabs">
        <p x-text="txt.text" x-show="open === txt.value"></p>
      </template>
    </div>
  </div>
</div>

【讨论】：