从 Alpine JS 中的函数访问属性答案

【问题标题】：Access properties from a function inside Alpine JS从 Alpine JS 中的函数访问属性
【发布时间】：2026-01-02 06:05:02
【问题描述】：

我尝试在 Alpine 中使用我的一些 jQuery 插件（当然，Alpine 应该长期取代 jQuery）。这个自动完成插件理论上可以按预期工作，但我无法从 onSelect() 中设置 targetCustomerId。如何从自动完成功能中访问和更改对象属性的值？

x-data="
        postForm($el.id, 'contracts/add', {
            targetCustomerId: '<?=$customer->CUSTOMERID;?>',

            init() {
                customerInput = $($refs.autocompleteInput).autocomplete({
                    type: 'POST',
                    serviceUrl: 'api/getCustomers',
                    onSearchStart: function() {
                        $(this).addClass('input-loader')
                    },
                    onSearchComplete: function() {
                        $(this).removeClass('input-loader')
                    },
                    onSearchError: function() {
                        $(this).removeClass('input-loader')
                    },
                    onSelect: function (suggestion) {
                        this.targetCustomerId = suggestion.value;
                    }
                });
            }
        })
    "

postForm() 被简化如下：

function postForm(formId, url, objSettings) {
    var defaults = {
        form: document.getElementById(formId),
        formData: '',
        message: '',
        isLoading: false
    }

    return {...defaults, ...objSettings};
}

【问题讨论】：

能否分享postForm函数的定义和一些表单代码？您是否尝试使用 targetCustomerId 作为 Alpine.js 变量？
@Dauros postForm() 对于这个例子来说是不必要的。它只是做一些基本的表单准备和“return {...defaultsSettings, ...customSettings};”，其中 customSettings 是 postForm() 的第三个参数。我想使用/设置 targetCustomerId 作为 Alpine.js 变量。

标签： javascript alpine.js alpinejs

【解决方案1】：

根据https://github.com/devbridge/jQuery-Autocomplete 的文档，在onSelect 方法中，this 变量refers the input element 所以我们不能像这样访问Alpine.js 上下文，我们必须使用例如$data magic.

假设响应数据如下所示：

{
    "suggestions": [
        { "value": "Customer 1", "data": 1 },
        { "value": "Customer 2", "data": 2 }
    ]
}

所以data 指的是CustomerId 而不是value 字段，修改后的onSelect 方法：

onSelect: function (suggestion) {
    $data.targetCustomerId = suggestion.data;
}

这里$data指的是Alpine.js数据对象，suggestion是点击的自动完成项。

【讨论】：

非常感谢。 $data 正是我想要的 :)