0

I am working on a vue app. At the moment the app consists of a large number of components and a lot of code. Currently these components (almost all of them) do not have an id assigned to them. I would like to assign id to each and every component.

Since there are a lot of components I do not want to physically go to each component file and then give it the id attribute. Ideally I would like to assign it an ID using a function.

I have searched for a solution and have come across Vue.js : How to set a unique ID for each component instance? The solutions in this question discuss adding a plugin or a mixin that generates a unique id, but this still requires me to add the ID attribute physically in each component.

I have come up with the following function

const assignIds = (app, components = {}) => {
    let tags = components;
    let workingTag;
    console.log(app)
    console.log(app.$children.length)
    workingTag = app.$options._componentTag || app.$parent.$options._componentTag || "";
    let myTag = (workingTag + app.$el?.localName).toLowerCase().replaceAll('-','');
    let tagVal;
    let tagCount = tags[myTag] || 0;
    tagVal = myTag + tagCount;
    ++tagCount;
    tags[myTag] = tagCount;
    if(app.$el && (!app.$el?.id || app.$el?.id.includes("BVID"))){
      app.$el.id = tagVal;
    }
    if(app.$children.length > 0){
      let currentTag = app.$children;
      currentTag.forEach(element => {
        assignIds(element, tags)
        });
    }
  },

I am not sure where and how to add this function so that it runs on every mount in the application (multiple components have the mount being called) or add it as a plugin

uzher
  • 1
  • This can likely be done with global mixin for `mounted` but this doesn't cover elements that weren't created within Vue lifecycle. And this may be XY problem. Why would you need to do this? Accessing DOM directly is an antipattern in Vue, unless proven otherwise. – Estus Flask Jun 15 '21 at 10:49
  • The reason for doing this is because the code base is very big now with a lot of components. Assigning id by adding the attribute directly in each component will be a lot of work. So I am trying to find a way to assign id either using a function or a script to all the components without physically opening the component code and adding the id attribute – uzher Jun 16 '21 at 06:55
  • You didn't explain why you need to have ids everywhere. My point is that there aren't many good reasons for this, and you probably try to solve coding problem that needs to be solved in another way. – Estus Flask Jun 16 '21 at 07:03
  • Its for adding automated testing support. With Ids, things are easier to grab. I was able to assign ids to all the elements/components i needed to, using global mixin (as you suggested) and vanilla javascript to manipulate the dom. It does go against the Vue pattern but in this situtation, it gets the job done – uzher Jun 16 '21 at 14:19
  • I see. It makes sense, although `id` is intrusive, `data` is common for this. Then a global mixin with `mounted` is a proper place to do that. – Estus Flask Jun 16 '21 at 14:25

0 Answers0