title: How can i delete a certain row from a table in VueJS
body: <p>I am trying to delete a certain element from an array, that I display in a HTML-Table.</p>
  <p>Here's the frontend:</p>
  <p><a href="https://i.stack.imgur.com/4cVd0.png" rel="nofollow noreferrer">HTML-table_frontend</a></p>
  <p>I push the Data from the input into an array <code>userData</code>.
  The HTML-Table is build within a <code>v-for</code>loop in VUEjs.
  Upon Pressing a button, I want the dedicated function (e.g. <code>deleteData()</code>) to only be applied to the row that that button is in.
  <strong>How can I tell the button what Array-Index it needs to target?</strong></p>
  <p>Here's the code snippets:</p>
  <p>Table:</p>
  <pre><code>&lt;table id=&quot;userData&quot;&gt;
      &lt;tr&gt;
          &lt;th&gt;Name&lt;/th&gt;
          &lt;th&gt;Email Address&lt;/th&gt;
          &lt;th&gt;Mobile Number&lt;/th&gt;
          &lt;th&gt;Action&lt;/th&gt;
      &lt;/tr&gt;
  &lt;tr v-for=&quot;(userData, k) in userData&quot; :key=&quot;k&quot;&gt;  
       &lt;td class=&quot;name&quot;&gt;
          &lt;input readonly class=&quot;tableDisplay&quot; type=&quot;text&quot; v-model=&quot;userData.name&quot; /&gt;
      &lt;/td&gt;
       &lt;td&gt;
          &lt;input readonly class=&quot;tableDisplay&quot; type=&quot;email&quot; v-model=&quot;userData.email&quot; /&gt;
      &lt;/td&gt;
       &lt;td&gt;
          &lt;input readonly class=&quot;tableDisplay&quot; type=&quot;number&quot; v-model=&quot;userData.number&quot; /&gt;
      &lt;/td&gt;
       &lt;td&gt;
          &lt;button type='button' class=&quot;buttonRead&quot;  @click=&quot;readData&quot; &gt;Read&lt;/button&gt;
          &lt;button type='button' class=&quot;buttonEdit&quot; @click=&quot;editData&quot;&gt;Edit&lt;/button&gt;
          &lt;button type='button' class=&quot;buttonDelete&quot; @click=&quot;deleteData&quot;&gt;Delete&lt;/button&gt;
      &lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  <p>Javascript in the .vue:</p>
  <pre><code>&lt;script&gt;
  export default {
      data() {
          return{
              
              userData:[],
  
              newUser: {
                  name: '',
                  email:'',
                  number:''
              }
          };
      },
      methods: {
         
          customSubmit(){
              
              
                  this.userData.push(this.newUser)
                  this.newUser = {
                      name:'',
                      email:'',
                      number:''
                  }
                  console.log(this.userData)   
          
  
          },
  
        
  
          
      }
      
  }
  &lt;/script&gt;
  </code></pre>