如何在 VueJS 中单击元素的末尾附加 table 行？

Question

我试图在 table 上提供两行，但用户可能需要更多行来输入将要提交的表单的更多数据部分。我很难完成这项工作。有人可以帮忙吗？我试图在用户单击最后一个 TR > TD 末尾的小加号图标时添加一行。

 <template>
        <table id="myTable">
          <tbody>
            <tr v-for="(content1, content2, content3, content4, index) in tableRows">
                <td scope="row" data-label="">{{content1}}</td>
                <td data-label="Filename">{{content2}}</td>
                <td data-label="Image Title">{{content3}}</td>
                <td data-label="Caption">{{content4}}></td>
                <td class="addrow" data-label="Add"><a class="add-link"><span @click="insert_Row()" class="plus-icon">+</span></a></td>
              </tr>
            </tbody>
          </table>  
          
    </template>
    
    <script>
         export default {
        data: {
          tableRows: ['D2',"<input type='text'>", "<input type='text'>", "<input type='text'>"], 
          counter: 2
        },
    
        methods: {
        insert_Row() {
          this.counter++;
          this.tableRows.push("D " +this.counter);
        }
      }
      }
    </script>
    <style lang="scss">
    td,
        th {
          padding: .4rem;
          &.addrow {
            border: 0 none;
            width: 2.3rem;
            padding: 1.7rem 0 0 0;
            vertical-align: middle;
            text-align: center;
          }
        }
    
        td .plus-icon {
          border:1px solid cornflowerblue;
          background-color: cornflowerblue;
          color: #fff;
          text-align: center;
          padding: 0 .7rem;
          box-sizing: border-box;
          border-radius: 50%;
          transition: all ease-in-out .4s;
          &:hover, &:focus {
            border:1px solid #182241;
            background-color: #182241;
       
          }
        }
    </style>

 I am trying to have two rows available on the table, but the user may need more rows to enter more data part of a form that will be submitted. I am having a hard time making this work. Can someone help with this? I am trying to add a row when the user clicks on the little plus icon at the end of the last TR > TD.* <template>
  <table id="myTable">
    <tbody>
      <tr v-for="(content1, content2, content3, content4, index) in tableRows">
        <td scope="row" data-label="">{{content1}}</td>
        <td data-label="Filename">{{content2}}</td>
        <td data-label="Image Title">{{content3}}</td>
        <td data-label="Caption">{{content4}}></td>
        <td class="addrow" data-label="Add">
          <a class="add-link">
            <span @click="insert_Row()" class="plus-icon">+</span>
          </a>
        </td>
      </tr>
    </tbody>
  </table>
</template>
<script>
  export default {
    data: {
      tableRows: ['D2', " < input type = 'text' > ", " < input type = 'text' > ", " < input type = 'text' > "], counter: 2 }, methods: { insert_Row() { this.counter++; this.tableRows.push("
          D " +this.counter); } } } 
</script>
<style lang="scss">
  td,
  th {
    padding: .4rem;

    &.addrow {
      border: 0 none;
      width: 2.3rem;
      padding: 1.7rem 0 0 0;
      vertical-align: middle;
      text-align: center;
    }
  }

  td .plus-icon {
    border: 1px solid cornflowerblue;
    background-color: cornflowerblue;
    color: #fff;
    text-align: center;
    padding: 0 .7rem;
    box-sizing: border-box;
    border-radius: 50%;
    transition: all ease-in-out .4s;

    &:hover,
    &:focus {
      border: 1px solid #182241;
      background-color: #182241;
    }
  }
</style> ``` Okay now, after a good response, I have edited the code. It now looks like this. ``` <template>
  <table id="myTable">
    <tbody>
      <tr>
        <td scope="row" data-label="">D1</td>
        <td data-label="Filename">
          <input type="text">
        </td>
        <td data-label="Image Title">
          <input type="text">
        </td>
        <td data-label="Caption">
          <input type="text">
        </td>
        <td class="addrow" data-label="Add"></td>
      </tr>
      <tr>
        <td scope="row" data-label="">D2</td>
        <td data-label="Filename">
          <input type="text">
        </td>
        <td data-label="Image Title">
          <input type="text">
        </td>
        <td data-label="Caption">
          <input type="text">
        </td>
        <td class="addrow" data-label="Add"></td>
      </tr>
      <tr v-for="(item, index) in tableRows" :key="item.id">
        <td scope="row" data-label="">D{{item.id}}</td>
        <td data-label="Filename">
          <input type="text" v-model="item.Filename">
        </td>
        <td data-label="Image Title">
          <input type="text" v-model="item.ImageTitle">
        </td>
        <td data-label="Caption">
          <input type="text" v-model="item.Caption">
        </td>
        <td class="addrow" data-label="Add">
          <a class="add-link">
            <span @click.stop="insert_Row" class="plus-icon">+</span>
          </a>
        </td>
      </tr>
    </tbody>
  </table>
</template>
<script>
  export default {
    data() {
      return {
        tableRows: [{
          "id": 3,
          "Filename": "",
          "ImageTitle": "",
          "Caption": ""
        }]
      }
    },
    methods: {
      insert_Row() {
        this.tableRows.push({
          "id": this.tableRows.length + 3,
          "Filename": "",
          "ImageTitle": "",
          "Caption": ""
        })
      }
    }
  }
</script>
<style lang="scss">
  td,
  th {
    padding: .4rem;

    &.addrow {
      border: 0 none;
      width: 2.3rem;
      padding: 1.7rem 0 0 0;
      vertical-align: middle;
      text-align: center;
    }
  }

  td .plus-icon {
    border: 1px solid cornflowerblue;
    background-color: cornflowerblue;
    color: #fff;
    text-align: center;
    padding: 0 .7rem;
    box-sizing: border-box;
    border-radius: 50%;
    transition: all ease-in-out .4s;

    &:hover,
    &:focus {
      border: 1px solid #182241;
      background-color: #182241;
    }
  }
</style>
I want to only have the icon plus on the last row cell. I wish to hide or remove the others, but also, I edited the code to start with 3 rows instead of one.

Answer 1

您的数据应该是反应式的。

您应该将数据绑定到 html 输入。

您需要重新考虑您的代码。以下是如何开始的示例：Vue SFC Playground

如何在 VueJS 中单击元素的末尾附加 table 行？

How do I append a table row at the end on an element click in VueJS?

append

onclick

vue.js