I need help to select a table header and select the column using classes. As in Netflix. I’m noob in VueJS

Example GIF

My code is

<table class=”table”>
<thead class=”text-center”>
<tr>
<th scope=”col”><button type=”button” class=”btn plan_columnA selected” @click=”planSelect(‘plan_columnA’)”>Column A</button></th>
<th scope=”col”><button type=”button” class=”btn plan_columnB” @click=”planSelect(‘plan_columnB’)”>Column B</button></th>
<th scope=”col”><button type=”button” class=”btn plan_columnC” @click=”planSelect(‘plan_columnC’)”>Column C</button></th>
</tr>
</thead>

<tbody class=”text-center”>
<tr>
<td class=”plan_columnA selected”>Mark</td>
<td class=”plan_columnB”>Otto</td>
<td class=”plan_columnC”>@mdo</td>
</tr>
<tr>
<td class=”plan_columnA selected”>Jacob</td>
<td class=”plan_columnB”>Thornton</td>
<td class=”plan_columnC”>@fat</td>
</tr>
<tr>
<td class=”plan_columnA selected”>Larry</td>
<td class=”plan_columnB”>the Bird</td>
<td class=”plan_columnC”>@twitter</td>
</tr>
</tbody>
</table>

My style is

.btn {
background-color: darkgrey;
color: white;
}
button.selected {
background-color: red;
}
td.selected {
color: red;
}

I try to do this, but I do not know if it’s right

export default {
data () {
return {
planSelected: ‘’,
}
},

methods: {
planSelect (plan) {
this.planSelected = plan;

$(‘.selected’).removeClass(‘selected’);
$(‘.’ + this.planSelected).addClass(‘selected’);
},
},
}

I tried JQuery, but to do it in VueJS.

Thanks!

Solution :

That’s fairly easy, i’ve made an example for you in a fiddle, hope it helps you on the way. It should be made more dynamically, for better overview, but you can play around with the code i’ve made.

In the perfect scenario, you would generate all rows/columns from a data variable, instead of doing all this manually.

https://jsfiddle.net/6aojqm0k/

What i’ve made is just having 1 data variable, which you set and check for on the different tds and buttons.

data: () => ({
planSelected: ‘plan_columnA’
})

Button to choose the plan:

<button type=”button” class=”btn plan_columnA” :class=”{selected: planSelected === ‘plan_columnA’ }” @click=”planSelected = ‘plan_columnA’”>Column A</button>

And the actual column to show selected

<td class=”plan_columnA” :class=”{selected: planSelected === ‘plan_columnA’ }”>Mark</td>

Pro tip: Never combine jQuery and VueJS - Just use VueJS