如何在AlpineJS的dropdown函数内新增调用close()的函数

嘿，这事儿其实很简单，你只需要在dropdown()函数返回的对象里，直接新增你的自定义方法，并且通过this关键字来调用内部的close()方法就可以了。

修改后的完整代码 #

<div x-data="dropdown()">
  <button x-on:click="open()">Open</button>
  <div x-show="isOpen()" x-on:click.away="close()">
    <!-- Dropdown content -->
  </div>
</div>

<script>
function dropdown() {
  return {
    show: false,
    open() {
      this.show = true
    },
    close() {
      this.show = false
    },
    isOpen() {
      return this.show === true
    },
    // 新增的自定义方法
    aNewFunction() {
      // 用this调用内部的close方法
      this.close();
    }
  }
}
</script>

关键说明 #

• 在AlpineJS的组件函数中，返回的对象里的所有方法，都是通过this来访问同一个对象里的其他属性和方法的。所以在aNewFunction里，this.close()就能正确触发关闭下拉框的逻辑。
• 之后你就可以在模板里通过x-on:click="aNewFunction()"这样的方式调用这个新方法啦。

内容的提问来源于stack exchange，提问作者eskimo