Laravel nova-基于另一个字段的自定义字段集值，仍可编辑

拉威尔5.8 新星2.0.0

我有两个基于第一个字段的字段，我想设置第二个字段的值，用户可以使用设置的值，也可以插入一个新字段并提交表单

我正在添加自定义字段，如

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

现在，在

CustomField

class

dependsOn（）

方法中，我可以访问dependsOn字段名，即

field_1

，也可以在Vue>FormField.Vue中，我可以在模板中作为

{field.dependsOnField}

和

console.log（this.field.dependsOnField}）访问它在JS部分，但我如何才能获得
字段_1
的值，并且在更改时我可以获得新值，我对Vue JS是新手，但我像这样尝试过

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（组件）
类似于

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

我在VueComponent中创建了一个方法：

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

用法：

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

我在VueComponent中创建了一个方法：

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

用法：

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