如何在定义x-data的<div>内部引用完整的x-data对象？

现有代码可正常运行，但希望点击按钮时直接传递当前div的完整x-data对象给update函数，无需手动通过{name, age, size}重新构建对象。试过传入this、self都没找到便捷的引用方式，也不想把update函数定义在x-data内部（那样要手动写this.name、this.age、this.size，同样繁琐）。

解决方案 #

使用Alpine.js内置的$data变量，它可以直接引用当前组件的完整x-data对象，该方法在Alpine.js官方文档中有记载。

修改后的代码示例 #

<script>
    records = JSON.parse(localStorage.getItem("records"))

    update = (data) => {
        // 直接使用data对象中的属性
        records[data.name] = { age: data.age, size: data.size }
        localStorage.setItem("records", JSON.stringify(records))
    }
</script>

<body>
    <div x-data="{name:'',age:'',size:''}">
        <input x-model="name" placeholder="name">
        <input x-model="age" placeholder="age">
        <input x-model="size" placeholder="size">
        <button @click="update($data)">Add/Update</button>
    </div>
</body>

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