从自定义字段更新兄弟输入字段

Question

我正在使用 Laravel Nova 并创建了一个自定义字段，它通过 api 服务获取公司信息。这很好用。我被卡住的地方是，当公司数据 returns 我想用这些数据填写其余的资源表单字段时。我快到了，但是我的Vue技能不是很好

所以我创建了一个 vue 方法，当用户 select 的公司来自 select 字段时调用。我可以发送值，但我无法编辑其他字段 vue 组件，因此无法添加侦听器。我可以通过传递自定义字段中的数据来更新这些字段吗？

fillInputFields (selectedCompanyData) {
    this.$parent.$children.forEach(component => {
         if (component.field !== undefined && component.field.attribute == 'name') {
              component.field.value = selectedCompanyData.name
         }
         if (component.field !== undefined && component.field.attribute == 'tax_number') {
              component.field.value = selectedCompanyData.cvr
         }
    })
},

Answer 1

您可能想要发出事件并在其有效负载中传递数据

fillInputFields(selectedCompanyData) {
    this.$parent.$emit("fill-company-data", {
        name: selectedCompanyData.name,
        cvr: selectedCompanyData.cvr
    });
}

并监听兄弟姐妹中的事件并进行相应更新

利用通灵技能效仿兄妹

mounted() {
    this.$root.$on("fill-company-data", data => {
        this.name = data.name;
        this.tax_number = data.cvr;
    });
}

希望对您有所帮助

Answer 2

感谢指导人员，我正忙于 google 地图 API 在 Laravel Nova 3+ 上的实现，我想实现类似的东西。

我在该组件 FormField.vue 文件中有一个名为“PlacesSearch”的自定义字段我有一个名为搜索的字段输入，它接受一个地址，然后我填充 address_line_1 等字段基于API

的 return

// 在 Nova 资源中

PlacesSearch::make('Search')->onlyOnForms(),

// 在 FormField.vue - mounted()

Nova.$on("fill-search-fields", (data) => {
  this.$parent.$children.forEach((component) => {
    if(component.field.attribute == 'address_line_1'){
      component.value = data.address_line_1;
    }
  });
});

// 在 FormField.vue - search() 中，即我编写的从 API 获取的方法，但已替换为演示文本

Nova.$emit("fill-search-fields", {
  address_line_1: 'address line 1',
});

从自定义字段更新兄弟输入字段

Update sibling input fields from custom field

laravel

vue.js

laravel-nova