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

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.

atleast you should have the reason to down vote the question. — Rasik
– Rasik, Commented Feb 25, 2018 at 7:34
@Downvoter: I'd be interested in the reason for the downvote for this answer. How can I improve this answer? Downvotes without explanation are not particularly useful. — Rasik
– Rasik, Commented Mar 6, 2018 at 15:37

Rasik · Accepted Answer · 2018-04-10 15:15:25Z

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!

stdob-- · Accepted Answer · 2018-02-25 07:11:46Z

0

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>&nbsp;</td>
    <td>
      Remarks <input type="text" class="form-control" v-model="pay.Remarks" />
    </td>
  </tr>          
</template>

[ https://jsfiddle.net/dcr202yn/ ]

answered Feb 25, 2018 at 7:11

stdob--

29.2k6 gold badges62 silver badges77 bronze badges

3 Comments

stdob-- Over a year ago

@aakash I think you need to look more closely at my answer. And jsfiddle too.

Rasik Over a year ago

I looked at your answer. You changed the line to other way <input type="checkbox" v-model="selectedIds" :value="{selectedId: pay.Id}" /> which works for you but i cannot change this line because it have other meaning for me.

Rasik Over a year ago

and i could not change the line because i need the output in this way: selectedId: [{selectedId: 1}, {selectedId: 2}]

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related