Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Devtools: <b-form-group> is not nested in <b-form>

See original GitHub issue

Describe the bug

I wrote a component that leverages <b-form> and <b-form-group> but I can’t understand why <b-form-group> is rendered outside <b-form> inside Vue Inspector

Steps to reproduce the bug

Basically this is the code

And this is the inspector

Expected behavior

<b-form-group> should be nested inside <b-form>

Versions

Libraries:

BootstrapVue: 2.0.0-rc26
Bootstrap: 4.3
Vue: 2.6.10

Environment:

Device: [e.g. Mac or iPhone X] PC
OS: [e.g. macOS Mojave or iOS 12] Windows 10 using Docker
Browser: [e.g. Chrome] Chromium
Version: [e.g. 70] Edge v 0.77

Demo link

Additional context

Issue Analytics

State:
Created 4 years ago
Comments:6 (3 by maintainers)

Top GitHub Comments

1reaction

tmorehousecommented, Jul 11, 2019

One thing about Vue Devtools is that it shows the parent hierarchy based on the scope of app/component.

i.e. a child component exists in the component/app scope that it was created in. b-form is functional (has no this context), as is b-card and b-card-body. Transition is an abstract component. So if you were to inspect the b-form-group (which is not functional) root element in chrome inspector, and check it’s this.$parent, the first real non-functional component $parent is tour custom component.

In chrome inspector, highlight the first b-form-group root element (the fieldset), then in the console type $0.__vue__.$parent you will see that your app component is it’s parent.

Vue devtools doesn’t show components in their DOM hierarchy, but rather by their this.$parent hierarchy.

0reactions

ludo237commented, Jul 11, 2019

That’s interesting thanks for sharing

Top Results From Across the Web

Nested angular forms can't find FormGroup - Stack Overflow

For nested formGroups, use formGroupName not formGroup .

3 Approaches for Implementing Nested Forms in Angular

Approach 1: Pass FormGroup reference to child components using @Input. This is the most common approach that I've seen being used. We start...

Angular: Nested Reactive Forms Using ... - Medium

In this post, we will see how to implement nested reactive forms using composite ... on Reactive Forms mainly FormGroups, FormControls, Validations etc....

FormGroupName - Angular

Use nested form groups to validate a sub-group of a form separately from the rest or to group the values of certain controls...

Nested Reactive Forms Using ControlValueAccessors(CVAs)

Since our form control (component) doesn't falls in any these categories, angular compiler throws error stating no value accessor is found. If you...