Accessing x-data in a function

Question

I have the following code:

<div class="filter" x-data="filterData()">
    <button @click="test()>Click me</button>
</div>

Filter Data

window.filterData = () => {
    return {
        section: null,
        options: {
            "one": [],
            "two": [],
            "three": []
        },
        test() {
            console.log(this.options);
        },
    }
}

When I click on test() all I get back is Proxy {} in the console log. What can I do to actually interact with the options data?

Answer 1

The Proxy is the reactive wrapper used by Alpine to track updates but it functions the same as the wrapped value.

In this case if you do this.options.one.length you'll get 0.

If you need to inspect the value you can JSON.stringify() it