vuejs toogle a table row inside a table when checkbox check/uncheck - html

Question

I am iterating a object and displaying the result on a table.
HTML:
<div id="app">
<div id="app">
<p> SeletedId's {{ selectedIds }}</p>
<table class="table table-bordered table-hover table-striped">
<thead>
<tr class="text-center">
<th>
<span class="badge badge-info">Select</span>
</th>
<th>
<span class="badge badge-success">Name</span>
</th>
</tr>
</thead>
<tbody v-for="(pay,i) in PaymentType" :key="i">
<tr>
<td>
<input type="checkbox" v-model="selectedIds" :value="{selectedId: pay.Id}" />
</td>
<td>{{pay.Name}}</td>
</tr>
<!---I wanted to show the input box here -->
</tbody>
</table>
</div>
</div>
Vue:
new Vue({
el: '#app',
created(){},
data: {
message: 'Hello Vue.js!',
PaymentType: [{
Id: 1,
Name: "Cash",
HasOtherField: false,
Remarks: ""
},
{
Id: 2,
Name: "Check",
HasOtherField: false,
Remarks: ""
},
{
Id: 3,
Name: "Others",
HasOtherField: true,
Remarks: ""
}
],
selectedIds: []
}
})
I wanted to show a div or a row with a input box below the table. That should show/hide with the check box checked or unchecked.
For Hiding or showing the the input box i am implemented the following:
<div v-show="selectedIds[i]">
<span>Remarks</span><input type="text" class="form-control"/>
</div>
This is what i have done so far. The label Remarks and input box is not properly in-line.

Answer 1

I have manage to display the input box in-line by adding the following <tr></tr>
on the above code.
<tr v-show="selectedIds[i]">
<td colspan="2">
<span>Remarks</span>
<input type="text" class="form-control" />
</td>
</tr>
On My final template
<div id="app">
<div id="app">
<p> SeletedId's {{ selectedIds }}</p>
<table class="table table-bordered table-hover table-striped">
<thead>
<tr class="text-center">
<th>
<span class="badge badge-info">Select</span>
</th>
<th>
<span class="badge badge-success">Name</span>
</th>
</tr>
</thead>
<tbody v-for="(pay,i) in PaymentType" :key="i">
<tr>
<td><input type="checkbox" v-model="selectedIds" :value="{selectedId: pay.Id}" /></td>
<td>{{pay.Name}}</td>
</tr>
<tr v-show="selectedIds[i]">
<td colspan="2">
<span>Remarks</span>
<input type="text" class="form-control" />
</td>
</tr>
</tbody>
</table>
</div>
</div>
Fiddle!

Answer 2

Use the template for the loop instead of the tbody, and v-if instead of v-show:
<template v-for="(pay, i) in PaymentType">
<tr :key="i*2">
<td>
<input type="checkbox" v-model="selectedIds" :value="pay.Id" />
</td>
<td>{{pay.Name}}</td>
</tr>
<tr :key="i*2 + 1" v-if="selectedIds.indexOf(pay.Id) !== -1">
<td> </td>
<td>
Remarks <input type="text" class="form-control" v-model="pay.Remarks" />
</td>
</tr>
</template>
[ https://jsfiddle.net/dcr202yn/ ]