CODEWITHSUNDEEP
vue.jsvuejs2
Dan Cohen
Dan Cohen

Reputation: 43

Show only parts of table vue.js

I want to create dynamic table with vue. I have button and table with 3 columns. I want that if i click on the button only the first and second colume will show and on addition click only the first and the third. So my question is what better is to do: A. to hide one colume on click B.to create customized table in the vue.js code by click

Upvotes: 1

Views: 189

Answers (1)

Daniel
Daniel

Reputation: 35734

without knowing any specifics, I'd go with easiest way, which for me would be to do two things. Use button to toggle value ie. @click="showCol=!showCol" and the for the columns I'd do <td v-if="showCol">{{col2data}}</td><td v-else>{{col3data}}</td> you can also do <td>{{showCol?col2data:col3data}}</td> And I'm sure there are some other ways too, but I'd try one of those. The former should use a shadow dom to replace the data, whereas the second option would not, so I'd imagine that if you have enough rows where that would matter, the second version may be faster. As always, test & measure if you want to know what's better.

Upvotes: 1

Related Questions