Vue

by Dian Carlos Cabral dos Santos

HTML

<div id="app">
    
    <p><b>Campos Mapeados</b></p><br>
    <ul>
        
        <li v-for="(data, index) in camposMapeados" :key="index" v-on:click="desmapear(data.id)">{{ data.nome }}</li>
        
    </ul>
    
    <br><br>
    
    <p><b>Campos Não Mapeados</b></p><br>
    <ul>
        <li v-for="(data, index) in camposNaoMapeados" :key="index" v-on:click="mapear(data.id)">{{ data.nome }}</li>
    </ul>
    
    <br>
    <br>
    
    {{ mapeados }}
    
</div>

Vue

new Vue({
  el: "#app",
  data: {
    base : [
    
    	{ id: 1, nome : "A"},
        { id: 2, nome: "B"},
        { id: 3, nome : "C"},
        { id: 4, nome : "D"},
        { id: 5, nome: "E"},
        { id: 6, nome : "F"}
    
    ],
    
    mapeados : []
  },
  computed : {
  
  	camposMapeados : function(){
    	
        return this.base.filter(campo => this.mapeados.includes(campo.id));
    
    },
    
    camposNaoMapeados : function(){
    	
       return this.base.filter(campo => !this.mapeados.includes(campo.id));
    
    }
  		
  },
  methods : {
  
  	mapear : function(id){
    
    	let object = this.base.find(campo => campo.id == id);
    
    	this.mapeados.push(object.id);
    
    },
    
    desmapear : function(id){
    
    	let index = this.mapeados.indexOf(id);
    
    	this.mapeados.splice(index, 1);
    
    }
  
  }
})