Usando Vue.js 2. Tengo una lista de objetos que estoy mostrando al usuario. Una entidad de ese objeto específicamente. Aquí hay una pantalla del objeto (solo muestra 1 por brevedad) y la lista en la que se muestra

 <v-sheet elevation="10" rounded class="py-4 px-1"> <div class="text-center text-caption"> Device Serial Number {{ this.deviceOptions.length }} </div> <v-chip-group multiple active-class="primary--text" v-model="deviceOptions" > <v-chip v-for="item in $store.state.responeArray" :key="item.key" @click="countDevices(item)" // pass this selected object to a method > {{ item.DeviceSerialNumber }} </v-chip> </v-chip-group> </v-sheet>

Cuando se hace clic en uno de estos elementos, paso el objeto del elemento a un método donde agrego el CollectionId a una matriz si no existe.

El objeto se pasa correctamente y verifico si existe en la matriz. Si no es así, lo agrego. Si anulo la selección, la reviso y la elimino. aquí está ese método.

 countDevices(e) { if (this.deviceOptions.indexOf(e.CollectionId) >= 0) { for(let i = 0; i < this.deviceOptions.length; i++) { if (this.deviceOptions[i] === e.CollectionId){ this.deviceOptions.splice(i, 1); } } console.log(this.deviceOptions.length); console.log(this.deviceOptions); } else { this.deviceOptions.unshift(e.CollectionId); console.log(this.deviceOptions.length); console.log(this.deviceOptions); } },

el problema real

Sin embargo, cuando agrega a la matriz, agrega dos valores. no sólo uno. No puedo decir cuál es ese valor adicional, pero creo que es el uso del observador vue.

Tome nota de la longitud que se muestra en la consola donde está presente el valor y el observador

Solo hay un elemento seleccionado, pero la longitud muestra 2. Mientras que mi objetivo es mostrar el número contado de índices dentro de la matriz.

¿Alguien puede ayudar en esto?