vue-tab | a touch swipe tab component for vue.js | Frontend Plugin library

This question is a follow-up to the StackOverflow answer provided here

How to have superscript in column header of this BootstrapVue table?

Here's the original code of the BootstrapVue table.

This question is a follow-up question to the answer provided here;

How to show only show/hide 2nd and 3rd column of this bootstrapvue table?

The code below will show/hide some columns in a BootstrapVue table.

I've inherited someone else's vue code that uses vue-tables-2. The table looks like this (very, very simplified)...

When a component data value ( which is array with objects ) changes the computed property is not affected.

In the example below, I have a table that is filled with some data ( it is tasks in different statuses with titles ). If you click on a task and you click the button 'CHANGE TASK INFO' it will change the current task selected to

old vuetify plugins not showing, but new vuetify plugins appear.v-checkbox as an example. can you help me

v-checkbox is not visible

I'm trying to use Vue Tables 3 library with Vue 3. Here is my code in main.js:

I'm trying to build tables based off a few selected properties from a previous component: I'm rendering a component called 'branch-comparison' to compare XML files and their properties and values. This component takes in two props:

selectedEnvs: An array of objects with a name and object

commonFiles: An array of files with a name and object

I'm using vue-tables-2 to build these tables. At the top of the template it runs a function called getProps() to generate a set of all possible properties from each file. I've hard coded 0 because currently I'm only letting the user choose 1 file at a time. It then goes through each file (only 1) and gets data for the main table and the comparison tables. They are virtually the same function (getHeadData and getTableData) but I've seperated them for now for further customization. The code is not that important for actually generating the tables, however something inside of them is causing my code to go in an infinite loop.

On the initial render of the component, there is never an infinite loop. Everything runs through, and doesn't break at all and works wonderfully. Once however the component has been rendered, and I make a change to the props, or even simply save the file in the editor and vue-cli hot reloads it, it goes into and infinite loop. All the data still get's generate fine and the component does as it's supposed to. But it loops through 101 times no matter what.

Things I've looked into:

Changing the data: I fully understand a component re renders on data change... however I don't believe I am changing any reactive data in any method call. I'm simply declaring it locally inside the function and returning it to that temporary variable. Also if this was the case, I believe it would go into an infinite loop on the initial component load, but this is not the case. It goes into the infinite loop only on a refresh or prop change.

Mutating the Vuex state: I looked into this but I am never changing the state of anything. I am simply accessing it in the getTableData and getHeadData methods. I then thought, perhaps assigning a variable to point to this state object is causing it to re render based on something accessing the state, so I tried instead of

He everyone! I have a vue js project and i installed a vue plugin called vue-tabs-component.

Link to repo: https://github.com/spatie/vue-tabs-component

It has an option to show a badge on a certain tab but my problem is that i do not know how to show the count variable into that component property.

So i have this piece of code:

I have a vue-tabulator table with a @row-click event that fires a bootstrap-vue modal, this modal shows perfect when triggered from a button but when fired from the table row, it centers the page vertically, I checked window.scrolY property and it's changed. Is there any way to prevent this behavior?