Блог

Я пытаюсь, чтобы в таблице было доступно две строки, но пользователю может потребоваться больше строк, чтобы ввести больше данных в форму, которая будет отправлена. Мне трудно заставить это работать. Кто-нибудь может помочь с этим? Я пытаюсь добавить строку, когда пользователь нажимает на значок маленького плюса в конце последнего 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;
          amp;.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;
          amp;:hover, amp;: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;

    amp;.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;

    amp;:hover,
    amp;: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;

    amp;.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;

    amp;:hover,
    amp;: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.
 

Ваши данные должны быть реактивными.

Вы должны привязать свои данные к входным данным html.

Вам нужно много раз переосмысливать свой код. Вот пример того, как вы могли бы начать: Игровая площадка Vue SFC