如何在AlpineJS 3的watch方法中访问组件属性？

你遇到的问题是因为$watch的回调使用普通function时，this的指向没有绑定到Alpine组件实例，导致访问this.date_option返回undefined。

解决方案1：使用箭头函数 #

箭头函数会继承外层作用域的this，也就是initModule方法里的组件实例，这样就能正常访问组件属性：

<form x-data="config()" x-init="initModule()">
    <input type="radio" value="one_date" x-model="type_date" /> 
    <label>Option A</label>

    <input type="radio" value="multi_date" x-model="type_date"/> 
    <label>Option B</label>
</form>

<script>
function config(){
    return {
        type_date : '',
        date_option : {dateFormat: "d-m-Y"},
        initModule(){
            this.$watch('type_date', (value) => {
                console.log(this.date_option)
            });
        }
    }
}
</script>

解决方案2：提前保存组件实例到变量 #

在initModule里先把组件实例赋值给一个变量，回调里用这个变量访问属性，避免this指向丢失：

<form x-data="config()" x-init="initModule()">
    <input type="radio" value="one_date" x-model="type_date" /> 
    <label>Option A</label>

    <input type="radio" value="multi_date" x-model="type_date"/> 
    <label>Option B</label>
</form>

<script>
function config(){
    return {
        type_date : '',
        date_option : {dateFormat: "d-m-Y"},
        initModule(){
            const self = this;
            this.$watch('type_date', function(value){
                console.log(self.date_option)
            });
        }
    }
}
</script>

原因说明 #

普通function作为回调时，this的指向由调用它的上下文决定，Alpine在执行$watch回调时没有将this绑定到组件实例，所以此时this并非指向你的组件对象。而箭头函数没有独立的this，会沿用外层函数的this；提前保存组件实例到变量则能直接在回调里引用该变量，从而访问到组件的属性。

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