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

【问题标题】：Update sibling input fields from custom field从自定义字段更新同级输入字段
【发布时间】：2019-10-12 02:52:07
【问题描述】：

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

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

【问题讨论】：

您可能希望发出一个事件并在其有效负载中传递数据

标签： laravel vue.js laravel-nova

【解决方案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;
    });
}

希望对你有帮助

【讨论】：

嗨，莎莉。非常感谢您的帮助！挂载功能会在其他兄弟组件上运行，对吗？如果是这样，那这正是我做不到的。我无法编辑这些文件
为什么不呢？它们不是二进制文件
我正在使用 Laravel Nova，它是一个 cms。每个输入字段类型都是它自己的组件。我不想更改系统的源代码。
不加监听就不能改变其他输入字段的值吗？
好的，莎莉，我明白了。 this.$root.$on("fill-company-fields", data => { this.$parent.$children.forEach(component => { if (component.field !== undefined && component.field.attribute == 'name') { component.value = data.name } } } 非常感谢您的帮助！！

【解决方案2】：

感谢大家的指导，我正忙于在 Laravel Nova 3+ 上实现 google maps 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',
});

【讨论】：