Update sibling input fields from custom field

Question

I am using Laravel Nova and have created a custom Field, that gets company info via an api service. This works just fine. Where I am stuck, is when the company data returns I want to fill the rest of the resource form fields with this data. I am almost there, but my Vue skills are not great.

So I created a vue method that is called when the user selects company from the select field. I can send the values, but I am not able to edit the other field vue components and therefore not able to add listeners. Can I update those fields simply by passing the data from the custom field?

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

You may want to emit an event and pass data in its payload instead

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

And listen to the event in the siblings and update accordingly

using psychic skills to emulate the siblings

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

Hope this helps