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 {}
