vue 實現刪除對象的元素 delete

Posted on by

刪除對象的元素 delete

data中定義一個form

  data: {
    seen: true,    
    from:{
        id:'',
        name:'',
        age:'',
    }
  }

現在不需要age元素

刪除 delete this.from.age;

場景form表單提交的時候新增的數據和編輯頁面公用一個頁面 ，在添加的時候不需要id而就可以delete刪除id

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 測試實例 </title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<script>
new Vue({
  el: '#app',
  data: {
    seen: true,    
      from:{
         id:'',
         name:'',
         age:'',
      }
  },
   mounted() {
    //this.initData();
      this.from.id=1;
      this.from.name='xc';
      this.from.age=18;
      this.from.content='xcvzxcvzxcv'; //直接添加元素
    delete this.from.age;//刪除age元素
    console.log(this.from)    
  },  
})
</script>
</body>
</html>

vue根據id刪除某一行

methods:{
  del(id){
    //ES6
    //根據id查找元素 findIndex
    //let index = arr.findIndex(function(ele,index,arr){return ele.id==id})
    //函數內如果返回true，就結束遍歷並返回當前index;
    //index如果沒有找到返回-1
   
    let index = this.tasks.findIndex(funciton(ele){
           return ele.id == id;
    })
    //假設沒有找到
    if(index === -1){
         return console.log('刪除失敗');
    }
    //刪除元素
    this.tasks.splice(index,1);
  }  
}

以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。

推薦閱讀：