Question

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

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和输入框没有正确联机。

Answer 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！

当复选框选中/取消选中时，vuejs会在表格内部显示一个表格行

1 个答案: