Laravel Nova 4中如何添加依赖其他字段的动态求和只读字段？

问题1：FormField组件访问并监听formData #

完全可以实现，直接借助Nova的全局表单实例+Vue监听机制即可：

• 在自定义只读字段的mounted钩子中，直接调用Nova.form，它包含当前表单的所有formData。
• 用Vue的$watch深度监听repeater对应的数组字段（比如你的repeater字段名为items），数组内任何一项数值变化时重新计算总和。

示例代码（自定义字段的component.vue）：

<template>
  <div class="form-group">
    <label>总和</label>
    <input type="text" :value="total" readonly class="form-control">
  </div>
</template>

<script>
export default {
  data() {
    return {
      total: 0
    }
  },
  mounted() {
    this.calculateTotal();
    // 深度监听repeater数组的变化
    this.$watch(
      () => Nova.form.formData.items,
      () => this.calculateTotal(),
      { deep: true }
    )
  },
  methods: {
    calculateTotal() {
      const items = Nova.form.formData.items || [];
      this.total = items.reduce((sum, item) => sum + (parseFloat(item.amount) || 0), 0);
    }
  }
}
</script>

问题2：DependsOn无响应式的解决办法 #

DependsOn默认仅在挂载或字段首次变更时触发，要实现实时响应需要调整依赖逻辑：

• 依赖repeater的整个数组字段，而非单个子字段
• 在dependsOn的回调中直接计算当前请求里的repeater数据总和，确保数组每一次变化都能触发回调

示例代码（Nova资源类中定义字段）：

Text::make('总和', function () {
    return collect($this->items)->sum(fn($item) => floatval($item['amount'] ?? 0));
})->readonly()
->dependsOn(['items'], function (Text $field, NovaRequest $request) {
    $total = collect($request->get('items', []))->sum(fn($item) => floatval($item['amount'] ?? 0));
    $field->setValue($total);
});

如果还是无法触发，可在repeater的数值子字段中添加@change事件，手动触发表单数据更新：@change="Nova.$emit('form-data-updated', Nova.form.formData)"

问题3：其他可行方案 #

1. 监听Nova全局表单事件：
   在自定义字段或Nova工具中，监听form-data-updated全局事件，每次表单数据变化时重新计算总和：

Nova.$on('form-data-updated', (formData) => {
  const total = (formData.items || []).reduce((sum, item) => sum + (parseFloat(item.amount) || 0), 0);
  // 找到总和字段并赋值
  const totalInput = document.querySelector('[name="total"]');
  if (totalInput) totalInput.value = total;
});

2. 自定义Repeater组件：
   直接重写Nova的Repeater组件，在每一项数值输入变化时实时更新总和字段。这种方式自由度最高，但需要熟悉Nova组件的内部逻辑。

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