Troubleshooting issues with deleting rows from a table in vue.js

<b-row>
                    <b-form-group class="col-md-12" id="input-group-12">
                      <h2 class="h2">Adding Attachments</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="Select PDF file"
                                    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: 'Select attachment'
        }
      })
    },
    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 the above code but facing an issue with deletion when using a standard input type text. The removeElement function is functioning correctly. I am unsure where the problem lies. Any suggestions or assistance would be greatly appreciated. I have now edited the code to include methods and data as well.**

Answer №1

A demonstration of the concept I am proposing

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 Application</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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to assign a unique ID to every <td> element within a table using React Js?

Hello everyone. I am currently working on assigning unique ids to each td in a table based on data received through an API. This is what my code looks like so far. CodeSandbox const assignIdsToTableData = (data) => { var items = Object.values(data)[0 ...

Error: Document expected to be found has already been removed

Upon attempting to log into the app, I encountered an error message in the client console (chrome dev tools) that reads as follows: Uncaught Error: Expected to find a document already present for removed mongo.js?69942a86515ec397dfd8cbb0a151a0eefdd9560d:2 ...

Optimizing Google e2e testing using Protractor

Improving login efficiency is necessary to enhance the speed of executing e2e tests. At present, after every test, the Chrome browser shuts down, requiring a new login session for each subsequent test. What changes can be made to address this issue? Any ...

What could be causing the absence of several nodes in my three.js animations?

As I work on creating a portfolio using three.js, I've encountered an issue with my animation sets not playing after triggering an event. Initially, the code worked fine, but now I keep receiving a series of warnings and the code doesn't run at a ...

Executing the serverless invoke local command produces no output

Attempting to locally run a node lambda for debugging purposes. Utilizing Serverless and the provided launch configuration in vsCode. { "version": "0.2.0", "configurations": [ { "type": "node", "request": "launch", "name": "Launc ...

Javascript animation functioning for a singular item within a list

As I continue practicing my skills in Javascript and HTML, I stumbled upon this intriguing list known as "item/adapter", similar to what we refer to as adapters in Android. While the process of adding them programmatically to my div is working smoothly, I& ...

Trouble seeing span in ion-item in Ionic 2: How can I display plain text instead?

It seems like I may be overlooking something, as I am experiencing an issue with adding a span to an Ion Item, where the span is not being rendered, nor is the div. <ion-card> <ion-card-title> </ion-card-title> <div> < ...

The variable is unable to transfer successfully from JavaScript to PHP using ajax

I have a code that is designed to pass the values of all checked checkboxes to a PHP file in order to delete corresponding rows from a CSV file. The checkbox values are dynamic. <tr><td><span class="custom-checkbox"><input ty ...

managing, modifying and removing information within the app.controller in AngularJS

I am currently facing a challenge with my Javascript code for a simple web application that involves AngularJS. Here is the snippet of code I am working on: app.filter('startFrom', function () { return function (input, start) { if (i ...

Why is req.app.post(...)create_event not functioning as expected?

Currently, I'm utilizing axios, node.js, express.js, and SQL to send a post request to my database. However, each time I attempt to do so, I encounter an error message stating: "TypeError: req.app.post(...).create_event is not a function". I've b ...

Search the database to retrieve a specific value from a multi-dimensional array

My database is structured as shown in the image below: https://i.sstatic.net/Flne8.png I am attempting to retrieve tasks assigned to a specific user named "Ricardo Meireles" using the code snippet below: const getTasksByEmployee = async () => { se ...

Prevent reloading the page when adding a flash element using JavaScript (jQuery)

Here is the function I am working with: function onVideo(vchat, idUser){ $('#videollamada').html('<div class="videollamada">'+ '<div align="right">'+ ...

React component fails to re-render after state change

For the past two days, I've been struggling with this error and can't seem to fix it! I'm currently working on creating a weather app in React which utilizes the API. The app features a Bootstrap Navbar with a search option that allows user ...

Having trouble sending a post request to the /register endpoint

Recently, I've been working on setting up a user registration process using Node.js. However, I've encountered an issue where every time I send a POST request with email and password, I receive a 404 error in Postman stating "Cannot POST /signup" ...

Simple steps to access a feature on an AngularJS application

I have my angular application stored in a variable (initialized with:) var app = angular.module('app', [...]); Now, I need to access the $timeout service. How can I retrieve this service from it? I am looking for something like: var timeout ...

Pause the YouTube video when the modal is closed, following an AJAX load

I'm facing an issue with a small script that is supposed to stop YouTube videos from playing once their modals are closed. The problem arises when the HTML content is loaded through AJAX. Here is the script: $('#panelModal-1').on(&apos ...

Service update causing $scope in Ionic Angular Cordova to remain stagnant

As a newcomer to Angular, I've been working on a project to create an app that can answer questions, select images, and send data to the server. I'm facing some challenges with updating the scope properly when a user selects an image. It seems l ...

Error encountered during webpack development build due to syntax issues

Having trouble building a project with webpack due to persistent syntax errors? It seems like when your friend runs the same code on Linux (while you're working on Windows 10), everything works fine without any errors. Here is the configuration for m ...

Tips for integrating CSS keyframes in MUI v5 (using emotion)

Hey there! I'm currently working on adding some spinning text, similar to a carousel, using keyframes in my React app. The setup involves MUI v5 with @emotion. Basically, I want a "box" element to show different words every few seconds with a rotating ...

How to Utilize JQuery for Sticky Elements

I am experimenting with a unique twist on the classic Sticky Element concept. Check out for a typical sticky element example. Instead of the traditional sticky behavior, I am looking to have an element initially anchored to the bottom of the user's ...