As a user, I need to be able to set the id attribute to the div that replaces the tab-content tag

[ksidibe]

The current way (t.tabId=""+t.title.replace(/ /g,"")+e) of generating the id attribute makes it unusable for cases when you need a clear control over the id of the "div"s. For example, before allowing the user to move forward or backward, I need to call a validation plugin with one or more divs as containers which are validated. If the given divs are valid then the forward/backward movement is allowed.

[cristijora]

Hi @ksidibe. This could be implemented but you could simply place a div inside each tab-content and give it your own ids. Wondering what validation do you use since most validation libraries for vue work with components/refs

[ksidibe]

Hey, @cristijora. The approach you suggested could work. Although, that would make the HTML markup more verbose (granted very slightly) with an extra set of "div" tags per tab-content. Other than that, your suggestion will do the job nicely. I use a jQuery plugin called FormValidation. For tabular/wizard-based forms, it allows you to validate the current tab only if you wish. I think, it would be handy to allow the user to pass attributes to the tab-content divs. As an intermediate step, we could implement a method that returns the DOM element of the current tab-content. For the time being this is the solution I'm using: var $currentTab = $('.wizard-tab-content .wizard-tab-container:visible:first'); fv.validateContainer($currentTab);

[cristijora]

@ksidibe I would advise against such solutions (jquery validate) You will find yourself writing jquery based code where it shouldn't be. Use a native vue validation solution instead. https://github.com/vuejs/awesome-vue#validation I could recommend vee-validate or element-ui validation if you use that. The problem with using such jquery plugins is that you tend to manipulate DOM which Vue tries to avoid via it's reactive nature.

Such an approach will also

1. Get complicated fast
2. Will be hard to understand and maintain after some time
3. Depends on some selectors which might change
4. Will be hard to unit test

If you worry about validation only the current tab, you could simply separate each tab into a separate component, have a validation method and call it when you need. I will try to provide a realistic example with codesandbox and vee validate later on

[ksidibe]

Hey, @cristijora. Your points are valid. But in our case, Vue is used in a much smaller subset of the code base. So, there are many more parts where we use this validation plugin. In any case, whatever the use-case might be, I think vue-form-wizard is a very good Vue component that can be further enhanced by adding attribute processing functionality to it. for example, even being able to define the id and classes in the tab-content directly. I'm new to Vue. But if you are opened to the idea suggested above, I could work on it offline and submit a pull request when I'm done. Thanks.

[cristijora]

Yeah, it doesn't hurt adding other properties on the tab-content. If you have the time and patience, you could simply add an id prop to the TabContent component and set it if it exists. :id="id ? id : tabId "

This would be a very simple fix.

Another option would be to pass attributes with https://vuejs.org/v2/api/#inheritAttrs option which will allow passing other attributes as well