Javascript 如何在VueJS中从表中删除特定行

我试图从数组中删除某个元素，该元素显示在HTML表中

这是前端：

我将数据从输入推送到数组

userData

。 HTML表是在VUEjs中的

v-for

循环中构建的。 按下按钮后，我希望专用功能（例如，

deleteData（）

）仅应用于该按钮所在的行。 我如何告诉按钮它需要指向哪个数组索引？

以下是代码片段：

表:

<table id="userData">
    <tr>
        <th>Name</th>
        <th>Email Address</th>
        <th>Mobile Number</th>
        <th>Action</th>
    </tr>
<tr v-for="(userData, k) in userData" :key="k">  
     <td class="name">
        <input readonly class="tableDisplay" type="text" v-model="userData.name" />
    </td>
     <td>
        <input readonly class="tableDisplay" type="email" v-model="userData.email" />
    </td>
     <td>
        <input readonly class="tableDisplay" type="number" v-model="userData.number" />
    </td>
     <td>
        <button type='button' class="buttonRead"  @click="readData" >Read</button>
        <button type='button' class="buttonEdit" @click="editData">Edit</button>
        <button type='button' class="buttonDelete" @click="deleteData">Delete</button>
    </td>
</tr>
</table>

名称
电子邮件地址
手机号码
行动
阅读
编辑
删除

.vue中的Javascript：

<script>
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)   
        

        },

      

        
    }
    
}
</script>

导出默认值{
数据（）{
返回{
用户数据：[]，
新用户：{
名称：“”，
电子邮件：“”，
编号：“”
}
};
},
方法：{
自定义提交（）{
this.userData.push（this.newUser）
this.newUser={
名称：“”，
电子邮件：“”，
编号：“”
}
console.log（this.userData）
},
}
}

索引通过的示例

<button type='button' class="buttonDelete" @click="deleteData(k)">Delete</button>

methods: {
  deleteData(k) {
     this.userData.splice(k, 1)
   }
}

删除
方法：{
删除数据（k）{
this.userData.splice（k，1）
}
}

或经过的物体

<button type='button' class="buttonDelete" @click="deleteData(userData)">Delete</button>

methods: {
  deleteData(userData) {
     let index = this.userData.indexOf(userData)
     this.userData.splice(index, 1)
   }
}

删除
方法：{
删除数据（用户数据）{
让index=this.userData.indexOf（userData）
this.userData.splice（索引，1）
}
}

UPD。读取数据

<button type='button' class="buttonRead"  @click="readData(k)" >Read</button>

methods: {
  readData (k) {
      console.log(this.userData[k].name)
    },
}

读取
方法：{
读取数据（k）{
console.log（this.userData[k].name）
},
}

还要更改userData变量名

<tr v-for="(rowUser, k) in userData" :key="k"> 

输入中

<input  ... v-model="rowUser.name" />

---

实时示例

索引通过的示例

<button type='button' class="buttonDelete" @click="deleteData(k)">Delete</button>

methods: {
  deleteData(k) {
     this.userData.splice(k, 1)
   }
}

删除
方法：{
删除数据（k）{
this.userData.splice（k，1）
}
}

或经过的物体

<button type='button' class="buttonDelete" @click="deleteData(userData)">Delete</button>

methods: {
  deleteData(userData) {
     let index = this.userData.indexOf(userData)
     this.userData.splice(index, 1)
   }
}

删除
方法：{
删除数据（用户数据）{
让index=this.userData.indexOf（userData）
this.userData.splice（索引，1）
}
}

UPD。读取数据

<button type='button' class="buttonRead"  @click="readData(k)" >Read</button>

methods: {
  readData (k) {
      console.log(this.userData[k].name)
    },
}

读取
方法：{
读取数据（k）{
console.log（this.userData[k].name）
},
}

还要更改userData变量名

<tr v-for="(rowUser, k) in userData" :key="k"> 

输入中

<input  ... v-model="rowUser.name" />

实例