Alpine js在绑定方法中获取原始元素

Question

假设我想在 Alpine.bind 方法中获取原始元素，我该怎么做？所以我可以检索 $el.targetName、$el.style、$el.onclick 等属性例如，如果我有：

<script>
    document.addEventListener('alpine:init', () => {
        Alpine.bind('SomeButton', () => ({
            type: 'button',
 
            '@click'() {
                // How would  i get the target element with ll its DOM properties
                //So I can retrive properties like  $el.targetName,$el.style, $el.onclick etc
            },
 

        }))
    })
</script>

我试过$el、this（只有returns一个js代理）等等

Answer 1

在组件定义中，您必须在每个对象前加上 this. 前缀才能访问组件的活动实例。所以解决方案就是使用 this.$el 访问按钮 HTML 元素：

<button x-data x-bind="SomeButton">Click here</button>

<script>
document.addEventListener('alpine:init', () => {
  Alpine.bind('SomeButton', () => ({
      type: 'button',

      '@click'() {
          console.log(this.$el.textContent)
      },
  }))
})
</script>

这会在单击时将 Click here 放入控制台。

注意：如果按钮没有 Alpine.js 父元素，请不要忘记将 x-data 添加到按钮。

Alpine js在绑定方法中获取原始元素

Alpine js get original element in bind method

javascript

alpine.js