Create a Custom field set value based on another field and still editable

[PrafullaKumarSahu]

laravel 5.8 Nova 2.0.0

I have two field based on first field I want to set the value of second and it is upto the user to use the set value or may insert a new one and submit the form.

I am adding custom field like

CustomField::make('Field 2', 'field_2')->dependsOn('field_1'),

Now in CustomField class dependsOn() method I can access, the dependsOn field name, that is field_1, also in Vue > FormField.vue I can access it as {{ field.dependsOnField }} in template and as console.log(this.field.dependsOnField); in JS part, but how I can get the value of field_1 and also on change I can get new value, I am new to Vue JS, but I tried it like

export default {

 mounted() {
        this.registerDependencyWatchers(this.$root)
    },

    methods: {
         registerDependencyWatchers(root) {
            //console.log('working 0');
            console.log(this.field.dependsOnField);
            root.$children.forEach(component => {
                if (this.componentIsDependency(component)) {
                    // console.log('working 1');
                    console.log(component.$attrs);

                    component.$watch('value', async (value) => {
                        console.log('working 2');
                        // this.dependencyValues[component.field.attribute] = value;
                        // this.supplier = value;

                        // var attr = (await Nova.request().post("/custom-field/nova-component/custom-field/supplier", {
                        //     dependKey: component.field.attribute,
                        //     dependValue: value
                        // })).data;

                        // this.supplier = attr.supplier;

                        this.registerDependencyWatchers(component)
                    });
                }
            });

        },

        componentIsDependency(component) {
            console.log(component);
             console.log(component.$attrs);
             console.log(component.field);
                if(component.field === undefined) { 
                    return false;
                }

                for (let dependency of this.field.dependsOnField) {
                    console.log(dependency);
                    if(component.field.attribute === dependency.field) {
                        return true;
                    }
                }

                return false;
            },

    }
} `componentIsDependency` is always returning false as `component.field` is undefined and if I am returing true there `component.$watch('value', async (value) => {` is not running, I coded it by taking reference from [NovaDependencyConatiner][1] package.

[leonakao]

You can try create the follow method in your Custom Vue Component:

findFieldByAttribute (attribute) {
    return this.$parent.$children.find(brotherField =>
        brotherField.field.attribute === attribute,
    );
}

Usage:

const field1 = this.findFieldByAttribute('field_1');
const field1Value = field1.value;