Deleting rows from table in vue.js not working properly

Question

<b-row>
                    <b-form-group class="col-md-12" id="input-group-12">
                      <h2 class="h2">Přidání příloh</h2>
                      <a
                        href="#"
                        class="plus-minus-toggle collapsed"
                        @click="addRow"
                      >
                      </a>
                      <table class="table">
                        <tbody>
                          <div class="container-fluid" style="padding-left:0">
                            <div class="row">
                              <tr
                                v-for="(row, index) in rows"
                                :key="index.toString()"
                                class="col-md-6 form-group form-group-block"
                              >
                                <td>
                                 <b-form-file
                                    v-model="row.id"
                                    accept=".pdf"
                                    placeholder="Vyberte PDF soubor"
                                    drop-placeholder="Drop file here..."
                                  ></b-form-file>
                                </td>
                                <td>
                                  <a
                                    @click="removeElement(index)"
                                    class="plus-minus-toggle"
                                  ></a>
                                </td>
                              </tr>
                            </div>
                          </div>
                        </tbody>
                      </table>

                      <div></div>
                    </b-form-group>
                  </b-row>

export default {
  components: { Multiselect /*pdf*/ },
  data() {
    return {
      rows: [],
    }
  },
  methods: {
    addRow: function(event) {
      event.preventDefault()

      var elem = document.createElement('tr')
      console.log(elem)
      this.rows.push({
        title: '',
        description: '',
        file: {
          name: 'Vyberte přílohu'
        }
      })
    },
    removeElement: function(index) {
      console.log(index)
      /*   if (index >= 0) {

      }
      index + 1
      return false*/
      this.rows.splice(index, 1)
      index + 1
    },
    setFilename: function(event, row) {
      //var file
      /* if (event.target.files[0] !== 1) {
        this.$refs.index.innerText = 'Vyberte přílohu'
        return
      }
*/
      var file = event.target.files[0]
      row.file = file
    }
  }
}

**I have this code but it is not deleting properly when I have standart input type text the function removeElement is working properly. I just don't know where the fault is Any suggestions please ? I did research on google but with no luck. Can you please help me ? I edited code now i have methods and also data. **

Answer 1

An example illustrating my suggestion

Vue.config.productionTip = false;
Vue.use(BootstrapVue);

new Vue({
  template: "#main",
  data() {
    return {
      text: "",
      items: [],
      index: 1
    };
  },
  methods: {
    addRow(text) {
      this.items.push({
        text: text || this.text,
        index: this.index++,
        file: null
      });
    },
    removeRow(index) {
      this.items = this.items.filter(item => item.index !== index);
    }
  },
  mounted() {
    this.addRow("Foo");
    this.addRow("Bar");
    this.addRow("Fus");
    this.addRow("Ro");
    this.addRow("Dah");
  }
}).$mount("#app");

<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />
<script src="//polyfill.io/v3/polyfill.min.js?features=es2015%2CIntersectionObserver" crossorigin="anonymous"></script>
<script src="//unpkg.com/vue@latest/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>

<div id="app">Vue App</div>

<script type="text/x-template" id="main">
  <div>
    <input v-model="text" />
    <button @click="addRow()">Add</button>
    <table class="table">
      <tbody>
        <tr v-for="item in items" :key="`file-row-${item.index}`">
          <td>{{item.text}}</td>
          <td>{{item.index}}</td>
          <td><b-form-file v-model="item.file" accept=".pdf"></b-form-file></td>
          <td><button @click="removeRow(item.index)">x</button></td>
        </tr>
      </tbody>
    </table>
  </div>
</script>