Tengo una matriz en mi componente Vue que estoy tratando de analizar en un método, pero no quiero la ID en absoluto. Quiero que la matriz sea igual a la actual, pero solo muestre el índice de opciones, no la identificación.
¿Hay alguna manera, dentro del método, de que pueda sacar el índice de ID de la matriz por completo?
var vm = new Vue({ el: "#app", data: { options: [ {id:100, option:"1 - John Doe"}, {id:200, option:"2 - Jane Doe"} ] }, methods: { getNames(){ let names = this.options; console.log(names); } } }) <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <button @click="getNames()">TEST</button> </div>Puede recorrer la matriz y crear otra matriz
var vm = new Vue({ el: "#app", data: { options: [ {id:100, option:"1 - John Doe"}, {id:200, option:"2 - Jane Doe"} ] }, methods: { getNames(){ let names = this.options.map(option => { return { option: option.option } }); console.log(names); } } }) <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <button @click="getNames()">TEST</button> </div>Esta es una tarea de JavaScript puro . Se puede resolver independientemente de VueJS o cualquier otro marco.
En general, puede aplicar dos enfoques (mantener lo que se necesita o eliminar lo que está obsoleto):
map : para transformar cada elemento de origen al nuevo formato de destino; devuelve una nueva matrizforEach con delete : para eliminar la propiedad no deseada de la matriz original let options: [ {id:100, option:"1 - John Doe"}, {id:200, option:"2 - Jane Doe"} ]; // to get a new (simple) array of strings let strings = options.map(o => o.option); console.log(strings); // to get the same array with nested objects where property was removed options.forEach(o => delete o.id); console.log(options);Ver también: Eliminar propiedad para todos los objetos en la matriz
Puedes usar el método del mapa :
var vm = new Vue({ el: "#app", data: { options: [ {id:100, option:"1 - John Doe"}, {id:200, option:"2 - Jane Doe"} ] }, methods: { getNames(){ let names = this.options.map(o => o.option); console.log(names); } } }) <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <button @click="getNames()">TEST</button> </div>