当复选框选中/取消选中时，vuejs 在表格内切换表格行答案

【问题标题】：vuejs toogle a table row inside a table when checkbox check/uncheck当复选框选中/取消选中时，vuejs 在表格内切换表格行
【发布时间】：2018-02-25 05:45:28
【问题描述】：

我正在迭代一个对象并将结果显示在表格上。

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: []
  }
})

我想在表格下方显示一个带有输入框的 div 或一行。这应该在选中或未选中复选框的情况下显示/隐藏。

为了隐藏或显示输入框，我实现了以下：

<div v-show="selectedIds[i]">
  <span>Remarks</span><input type="text" class="form-control"/>
</div>

这是我到目前为止所做的。标签Remarks 和输入框没有正确对齐。

【问题讨论】：

至少你应该有理由否决这个问题。
@Downvoter：我很想知道这个答案被否决的原因。我该如何改进这个答案？没有解释的否决票并不是特别有用。

标签： html css vue.js

【解决方案1】：

我已经设法通过添加以下<tr></tr> 来在线显示输入框

关于上面的代码。

<tr v-show="selectedIds[i]">
    <td colspan="2">
        <span>Remarks</span>
        <input type="text" class="form-control" />
    </td>
</tr>

在我的决赛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!

【讨论】：

【解决方案2】：

使用template 代替tbody 循环，使用v-if 代替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/]

【讨论】：

@aakash 我认为您需要更仔细地查看我的答案。还有 jsfiddle。
我看了你的回答。您将行更改为其他方式 <input type="checkbox" v-model="selectedIds" :value="{selectedId: pay.Id}" /> 对您有用，但我无法更改此行，因为它对我有其他含义。
我无法换行，因为我需要以这种方式输出：selectedId: [{selectedId: 1}, {selectedId: 2}]