Laravel Nova自定义AutocompleteField动态依赖失效求助

1. 修正setInitialValue方法的取值逻辑 #

前端组件中setInitialValue方法错误地直接赋值了currentField对象，而非字段的value属性，导致初始值和依赖更新后的值无法正确同步：

setInitialValue() {
    // 原错误代码
    // this.value = this.currentField || '';
    // 修正为：
    this.value = this.currentField.value || '';
}

2. 添加对currentField.value的监听 #

后端通过dependsOn更新字段值后，前端需要监听currentField.value的变化并同步到内部value变量，确保输入框显示最新值：

// 在组件的script中添加watch选项
watch: {
    'currentField.value'(newValue) {
        this.value = newValue;
        // 同步更新输入框DOM值，确保视觉一致
        if (this.$refs.autocompleteInput) {
            this.$refs.autocompleteInput.value = newValue;
        }
    }
}

3. 补充缺失的handleChange方法 #

input绑定了@input="handleChange"但未实现该方法，会导致控制台报错并影响表单事件同步，需补充：

methods: {
    // ... 其他已有方法
    handleChange(event) {
        this.value = event.target.value;
        this.$emit('input', this.value);
        // 通知Nova表单更新字段状态
        this.field.fill(this.value);
    }
}

4. 简化后端dependsOn的客户ID获取逻辑 #

可以直接从formData获取客户ID，避免不必要的resource转换：

AutocompleteField::make('route')
    ->dependsOn(['customer'], function (AutocompleteField $field, NovaRequest $request, FormData $formData) {
        $customerId = $formData->customer;
        if ($customerId) {
            $customer = \App\Models\Customer::find((int)$customerId);
            $field->value = $customer?->address ?? null;
        } else {
            $field->value = null;
        }
    }),

5. 确保Google Autocomplete实例适配值更新（可选） #

如果需要让Google Autocomplete识别自动填充的地址值，可在watch回调中补充实例同步逻辑：

'currentField.value'(newValue) {
    this.value = newValue;
    if (this.$refs.autocompleteInput) {
        this.$refs.autocompleteInput.value = newValue;
        // 触发Autocomplete的focus事件，使其识别新值
        if (this.autocomplete) {
            google.maps.event.trigger(this.$refs.autocompleteInput, 'focus');
        }
    }
}

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