从自定义字段更新同级输入字段

Question

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

因此，我创建了一个vue方法，当用户从选择字段中选择公司时会调用该方法。我可以发送值，但无法编辑其他Field 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

感谢各位的指导，我正忙于在 Laravel Nova 3+ 上实现谷歌地图 API，我想实现类似的东西。

我在组件 FormField.vue 文件中有一个名为“PlacesSearch”的自定义字段我有一个名为 search 的字段输入，它接受一个地址，然后我根据 API 的返回填充 address_line_1 等字段

// 在 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',
});