Alpine.js：如何使 ref 元素可见并专注于点击？

Question

当我点击链接“Hallo”时，我希望链接“Okay”是可见的并具有焦点。但是，当我单击“Hallo”时，“Okay”链接将变得可见，但它没有聚焦。只有当我再次单击“确定”链接时，才会聚焦。如何实现一键显示和聚焦链接？

  a:focus{
      color:yellow;
    }

<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js"></script>
<div x-data="{open:false}">
  <a href="#" @click="open=true;$refs.foo.focus()" >Hallo</a>
  <div x-show="open">
    <a href="#" x-ref="foo">Okay</a>
  </div>
</div>

Answer 1

当你的 JS 被执行时，foo 元素还没有显示出来，所以它不能被聚焦。在对焦之前，您需要等待它显示出来。 $nextTick 允许您这样做：

$nextTick 是一个神奇的属性，它允许您仅在 Alpine 进行响应式 DOM 更新后执行给定的表达式。 这对于您希望在 DOM 状态反映您所做的任何数据更新后与它进行交互时很有用。

a:focus{
  color:yellow;
}

<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js"></script>
<div x-data="{open:false}">
  <a href="#" @click="open=true;$nextTick(() => { $refs.foo.focus(); });" >Hallo</a>
  <div x-show="open">
    <a href="#" x-ref="foo">Okay</a>
  </div>
</div>

是否可以将 $nextTick 传递给函数并在那里调用它？还是只能内联？

您可以将myMethod 属性添加到x-data，并通过this 访问所有内容：

const appData = {
  open: false,
  myMethod() {
    this.open = true;
    this.$nextTick(() => { this.$refs.foo.focus(); });
  }
};

a:focus {
  color: yellow;
}

<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js"></script>
<div x-data="appData">
  <a href="#" @click="myMethod">Hallo</a>
  <div x-show="open">
    <a href="#" x-ref="foo">Okay</a>
  </div>
</div>