Alpine.js中key属性绑定失效，Alpine.bound获取值异常

问题根源 #

你代码里用了:key="name"这个写法，但AlpineJS并不支持:key指令——:key是Vue框架的专属语法，Alpine没有实现这个绑定逻辑。Alpine.bound($el, 'key', 'unknown')会尝试读取元素上通过Alpine绑定的key属性值，但因为这个属性根本没被Alpine处理过，所以找不到对应的值，只能返回你设置的默认值'unknown'。

修正方案 #

如果要通过Alpine.bound获取绑定值，得用Alpine支持的属性绑定语法，比如绑定自定义数据属性data-key：

<head>
    <script src="https://unpkg.com/alpinejs" defer></script>
</head>
<body x-data="{name: 'test', value: 1}">
    <button :data-key="name" @click="alert(Alpine.bound($el, 'data-key', 'unknown'))">
        click
    </button>
</body>

原理说明 #

Alpine.bound的作用是读取元素上通过Alpine的x-bind:（或简写:)绑定的属性值，只有用Alpine语法绑定的属性，才会被它识别到。原生属性或其他框架的语法在Alpine里不会被处理，自然无法读取到对应的值。

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