Laravel nova - Custom field set value based on another field and still editable

Question

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.

Console.log(component) is something like

VueComponent {_uid: 22, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: VueComponent, …}$asyncComputed: (...)$attrs: (...)$children: [VueComponent]$createElement: ƒ (a, b, c, d)$el: div.dropdown.relative.ml-auto.h-9.flex.items-center.dropdown-right$listeners: (...)$options: {parent: Vue, _parentVnode: VNode, propsData: {…}, _parentListeners: {…}, _renderChildren: Array(2), …}$parent: Vue {_uid: 14, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: Vue, …}$refs: {}$root: Vue {_uid: 14, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: Vue, …}$scopedSlots: {default: ƒ, menu: ƒ, $stable: true, $key: undefined, $hasNormal: true}$slots: {menu: Array(1)}$store: Store {_committing: false, _actions: {…}, _actionSubscribers: Array(0), _mutations: {…}, _wrappedGetters: {…}, …}$vnode: VNode {tag: "vue-component-75-dropdown", data: {…}, children: undefined, text: undefined, elm: div.dropdown.relative.ml-auto.h-9.flex.items-center.dropdown-right, …}classWhitelist: (...)close: ƒ ()toggle: ƒ ()visible: (...)__: ƒ ()_c: ƒ (a, b, c, d)_computedWatchers: {$asyncComputed: Watcher}_data: {__ob__: Observer}_directInactive: false_events: {}_hasHookEvent: false_inactive: null_isBeingDestroyed: false_isDestroyed: false_isMounted: true_isVue: true_props: {}_renderProxy: Proxy {_uid: 22, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: VueComponent, …}_routerRoot: Vue {_uid: 14, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: Vue, …}_self: VueComponent {_uid: 22, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: VueComponent, …}_staticTrees: null_uid: 22_vnode: VNode {tag: "div", data: {…}, children: Array(3), text: undefined, elm: div.dropdown.relative.ml-auto.h-9.flex.items-center.dropdown-right, …}_watcher: Watcher {vm: VueComponent, deep: false, user: false, lazy: false, sync: false, …}_watchers: (2) [Watcher, Watcher]$data: (...)$isServer: (...)$props: (...)$route: (...)$router: (...)$ssrContext: (...)get $asyncComputed: ƒ computedGetter()set $asyncComputed: ƒ ()get $attrs: ƒ reactiveGetter()set $attrs: ƒ reactiveSetter(newVal)get $listeners: ƒ reactiveGetter()set $listeners: ƒ reactiveSetter(newVal)get visible: ƒ proxyGetter()set visible: ƒ proxySetter(val)__proto__: Vue
custom-field:504 {}
custom-field:503 VueComponent {_uid: 25, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: VueComponent, …}$asyncComputed: (...)$attrs: (...)$children: Array(0)length: 0__proto__: Array(0)$createElement: ƒ (a, b, c, d)$el: div.progress$listeners: (...)$options: {parent: Vue, _parentVnode: VNode, propsData: undefined, _parentListeners: {…}, _renderChildren: undefined, …}$parent: Vue {_uid: 14, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: Vue, …}$refs: {}$root: Vue {_uid: 14, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: Vue, …}$scopedSlots: {$stable: true, $key: undefined, $hasNormal: false}$slots: {}$store: Store {_committing: false, _actions: {…}, _actionSubscribers: Array(0), _mutations: {…}, _wrappedGetters: {…}, …}$vnode: VNode {tag: "vue-component-153-loading", data: {…}, children: undefined, text: undefined, elm: div.progress, …}canSuccess: (...)color: (...)decrease: ƒ ()duration: (...)fail: ƒ ()failedColor: (...)finish: ƒ ()get: ƒ ()height: (...)hide: ƒ ()increase: ƒ ()pause: ƒ ()percent: (...)set: ƒ ()show: (...)start: ƒ ()__: ƒ ()_c: ƒ (a, b, c, d)_computedWatchers: {$asyncComputed: Watcher}_cut: 3.3333333333333335_data: {…}_directInactive: false_events: {}_hasHookEvent: false_inactive: null_isBeingDestroyed: false_isDestroyed: false_isMounted: true_isVue: true_renderProxy: Proxy {_uid: 25, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: VueComponent, …}_routerRoot: Vue {_uid: 14, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: Vue, …}_self: VueComponent {_uid: 25, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: VueComponent, …}_staticTrees: null_timer: null_uid: 25_vnode: VNode {tag: "div", data: {…}, children: undefined, text: undefined, elm: div.progress, …}_watcher: Watcheractive: truebefore: ƒ before()arguments: (...)caller: (...)length: 0name: "before"prototype: {constructor: ƒ}__proto__: ƒ ()[[FunctionLocation]]: vendor.js:98155[[Scopes]]: Scopes[4]cb: ƒ noop(a, b, c)arguments: (...)caller: (...)length: 3name: "noop"prototype: {constructor: ƒ}__proto__: ƒ ()[[FunctionLocation]]: vendor.js:94355[[Scopes]]: Scopes[3]deep: falsedepIds: Set(5) {267, 271, 268, 269, 272}deps: (5) [Dep, Dep, Dep, Dep, Dep]0: Dep {id: 267, subs: Array(1)}1: Dep {id: 271, subs: Array(1)}2: Dep {id: 268, subs: Array(1)}3: Dep {id: 269, subs: Array(1)}4: Dep {id: 272, subs: Array(1)}length: 5__proto__: Array(0)dirty: falseexpression: "function () {
↵      vm._update(vm._render(), hydrating);
↵    }"getter: ƒ ()arguments: (...)caller: (...)length: 0name: "updateComponent"prototype: {constructor: ƒ}__proto__: ƒ ()[[FunctionLocation]]: vendor.js:98146[[Scopes]]: Scopes[4]id: 650lazy: falsenewDepIds: Set(0) {}size: (...)__proto__: Set[[Entries]]: Array(0)length: 0newDeps: []sync: falseuser: falsevalue: undefinedvm: VueComponent {_uid: 25, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: VueComponent, …}__proto__: Object_watchers: (2) [Watcher, Watcher]$data: (...)$isServer: (...)$props: (...)$route: (...)$router: (...)$ssrContext: (...)get $asyncComputed: ƒ computedGetter()set $asyncComputed: ƒ ()get $attrs: ƒ reactiveGetter()set $attrs: ƒ reactiveSetter(newVal)get $listeners: ƒ reactiveGetter()set $listeners: ƒ reactiveSetter(newVal)get canSuccess: ƒ proxyGetter()set canSuccess: ƒ proxySetter(val)get color: ƒ proxyGetter()set color: ƒ proxySetter(val)get duration: ƒ proxyGetter()set duration: ƒ proxySetter(val)get failedColor: ƒ proxyGetter()set failedColor: ƒ proxySetter(val)get height: ƒ proxyGetter()set height: ƒ proxySetter(val)get percent: ƒ proxyGetter()set percent: ƒ proxySetter(val)get show: ƒ proxyGetter()set show: ƒ proxySetter(val)__proto__: Vue
custom-field:504 {}
custom-field:503 VueComponent {_uid: 27, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: VueComponent, …}
custom-field:504 {}
custom-field:503 VueComponent {_uid: 28, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: VueComponent, …}
custom-field:504 {}

Leonardo Nakao · Accepted Answer · 2021-05-18 14:03:13Z

0

I create a method in the VueComponent:

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

Usage:

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

edited May 18, 2021 at 14:03

answered May 17, 2021 at 18:49

Leonardo Nakao

713 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Laravel nova - Custom field set value based on another field and still editable

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related