CODEWITHSUNDEEP
laravelvue.jslaravel-nova
Vayu Robins
Vayu Robins

Reputation: 168

Update sibling input fields from custom field

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
         }
    })
},

enter image description here

Upvotes: 4

Views: 2370

Answers (2)

Matthew_Mani
Matthew_Mani

Reputation: 1

Thanks for the guidance guys, I was busy working with a google maps API implementation on Laravel Nova 3+ and I wanted to implement something similar.

I have a custom field called "PlacesSearch" inside that components FormField.vue file I have a field input called search which accepts an address, I then populate the address_line_1, etc etc fields based on the return of the API

// In Nova resource

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

// In 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;
    }
  });
});

// In FormField.vue - search() i.e the method I wrote that fetches from the API, but have replaced with text for demo

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

Upvotes: 0

Salim Djerbouh
Salim Djerbouh

Reputation: 11044

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

Upvotes: 3

Related Questions