我如何从 VueJS 中的 table 中删除某一行

Question

我正在尝试从数组中删除某个元素，我在 HTML-Table.

中显示该元素

这是前端：

HTML-table_frontend

我将数据从输入推入数组 userData。 HTML-Table 是在 VUEjs 中的 v-for 循环中构建的。按下按钮后，我希望专用功能（例如 deleteData()）仅应用于该按钮所在的行。 如何告诉按钮它需要定位到哪个数组索引？

这是代码片段：

Table:

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

Javascript 在 .vue 中：

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

Answer 1

带有传递索引的示例

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

methods: {
  deleteData(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)
   }
}

更新。读取数据

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

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

同时更改 userData 变量名

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

输入

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

实例https://jsfiddle.net/8v2cx4je/

我如何从 VueJS 中的 table 中删除某一行

How can i delete a certain row from a table in VueJS

javascript

arrays

button

vue.js