Como puedo filtrar un resultado de un array de objetos en vuejs con laravel

Intento crear dos funciones para mouseover y mouseout, pero esta parte de vuejs me cuesta un poco de trabajo, esto tengo en mis funciones de vuejs, el que me interesa un poco mas es el aespNew: this.aesp

 import draggable from 'vuedraggable'

export default {
    components: {
        draggable
    },

    props: ['mSemestreI','mSemestreII','mSemestreIII', 'mSemestreIV', 'mSemestreV', 'mSemestreVI', 'mSemestreVII', 'mSemestreVIII', 'mSemestreIX','aesp'],

    data() {
        return{
            mSemestreINew: this.mSemestreI,
            mSemestreIINew: this.mSemestreII,
            mSemestreIIINew: this.mSemestreIII,
            mSemestreIVNew: this.mSemestreIV,
            mSemestreVNew: this.mSemestreV,
            mSemestreVINew: this.mSemestreVI,
            mSemestreVIINew: this.mSemestreVII,
            mSemestreVIIINew: this.mSemestreVIII,
            mSemestreIXNew: this.mSemestreIX,
            aespNew: this.aesp,
            btn: 'primary'
        }
    },

    methods: {
        onAdd(event, posx){
            let id = event.item.getAttribute('data-id');
            axios.patch('/materias/updatePosx/' + id, {
                posx: posx
            }).then((response)=>{
                //success message
            })
        },
        update(){
            this.mSemestreINew.map((posy,index) => {
                posy.posy = index + 1
            })

            this.mSemestreIINew.map((posy,index) => {
                posy.posy = index + 1
            })

            this.mSemestreIIINew.map((posy,index) => {
                posy.posy = index + 1
            })

            this.mSemestreIVNew.map((posy,index) => {
                posy.posy = index + 1
            })

            this.mSemestreVNew.map((posy,index) => {
                posy.posy = index + 1
            })

            this.mSemestreVINew.map((posy,index) => {
                posy.posy = index + 1
            })

            this.mSemestreVIINew.map((posy,index) => {
                posy.posy = index + 1
            })

            this.mSemestreVIIINew.map((posy,index) => {
                posy.posy = index + 1
            })

            this.mSemestreIXNew.map((posy,index) => {
                posy.posy = index + 1
            })


            let posy = this.mSemestreINew.concat(this.mSemestreIINew).concat(this.mSemestreIIINew).concat(this.mSemestreIVNew).concat(this.mSemestreVNew).concat(this.mSemestreVINew).concat(this.mSemestreVIINew).concat(this.mSemestreVIIINew).concat(this.mSemestreIXNew);

            axios.put('/materias/updateAll', {
                posy: posy
            }).then((response) => {
                //success message
            })
        },
        mouseOver: function(index){
            let mover = this.aespNew;
            console.log(mover);
            this.active = true;
        },
        mouseOut:function(){
            console.log('false');
            this.active = false;
        }
    }
}

la parte del Log me arroja esto haciendo esto console.log(mover);

(44) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, __ob__: Observer]0: {…}1: {…}2: {…}3: {…}4: {…}5: {…}6: {…}7: {…}8: {…}9: {…}10: {…}11: {…}12: {…}13: {…}14: {…}15: {…}16: {…}17: {…}18: {…}19: {…}20: {…}21: {…}22: {…}23: {…}24: {…}25: {…}26: {…}27: {…}28: {…}29: {…}30: {…}31: {…}32: {…}33: {…}34: {…}35: {…}36: {…}37: {…}38: {…}39: {…}40: {…}41: {…}42: {…}43: {…}length: 44__ob__: Observer {value: Array(44), dep: Dep, vmCount: 0}__proto__: Array

Es todo el objeto que trae pero solo necesito acceder a 2 datos, pero no se como hacerlo

Jorge Davila (838 xp)nov 22, 2019

¿Que es lo que estras tratando de lograr con dichas funciones? Tal vez si explicas lo que tratas de lograr con esto sea mas facil ayudarte a resolver tu problema.

Daniel (84 xp)nov 22, 2019

Hola Jorge, lo que intento lograr es hacer un hover dependiendo del color de los botones, si el boton es rojo los elementos de la lista serian rojos pero teniendo en cuenta que los un 'id' este es area_especialidad_id

Pude lograr que los elementos hagan hover dependiendo del color (que es traido de un capo de la bd) , esta es mi funcion en vue

mouseOver: function(aesp){
                // let mover = this.aesp;
                console.log(aesp.color);
               this.bgColor = aesp.color;
                // this.active = true;
            },
            mouseOut:function(aesp){
                // console.log('false');
                this.bgColor = 'white';
                // this.active = false;
            }

Y cada uno de estos le pase esto

@mouseover="mouseOver(aesp)"
 @mouseleave="mouseOut(aesp)"

el ID que te menciono viene de

{{ aesp.areaEspecialidad }}

Hasta donde voy creo y puedo equivocarme es comparar el id de los elementos y el que esta en el boton, y que hagan hover dependiendo del color

Jorge Davila (838 xp)nov 22, 2019

https://codepen.io/jorge-lp/pen/ExxJRed

Dale una revisada a esto. Usando css basico puedes lograr tu cometido, en este caso estoy usando sass ya que vue te permite eso. Envez de pasarle un color, pasales una clase y simplemente basado en eso se colorearan. Si estas usando bootstrap puedes usar las clases por default de bootstrap, asi te harian el trabajo mas simple.
Edit 1: para indicarle a vue que debe usar sass o less en los estilos asegurate de agregar esto:

<style lang="scss" scoped></style>

La propiedad lang le indica que usaras sintaxis scss de Sass y la propiedad scoped le indica que dichos estilos solo se aplicaran dentro del componente.

Daniel (84 xp)nov 22, 2019

Puedo hacerlo con cada uno pero pueden ir agregando mas Especialidades y mas Materias y esas ya no vendrian con el hover y tendria que crear otra funcion

Jorge Davila (838 xp)nov 22, 2019

No, simplemente usa css básico. El problema es, piensas usar un color diferente para cada especialidad? Te recomendaría simplemente usar 2 colores. Usa un selector de css para que todos los elementos hijos sean de un color dependiendo si el padre es par o non. De esta manera aún teniendo 5000 categorías funcionaria igual. Caso contrario da una muestra de lo que quieres lograr ( alguna imagen referencial vendría bien ) para pensar en una forma mejor de hacerlo. Otra cosa que podrías hacer es asignarle el color mediante un atributo del elemento <li :style=" 'color:'+element.color">item</li>

Daniel (84 xp)nov 23, 2019

Gracias Jorge por responder y te adjunto lo que intento hacer o lograr,

https://i.imgur.com/x5VdygI.png

El ejemplo o las sugerencias que me das en un punto si me resultaron utiles, pero esta vez se me ocurrio querer implementar esto, como te puedes dar cuenta el cursor esta puesto en el primero boton de la segunda fila es color amarillo, cuando pasa el cursor los elementos relacionados con ese boton hacen el efecto de hover, quisiera saber si es posible hacer lo mismo con vuejs, y como puedes ver tengo. draggable table implementado

Jorge Davila (838 xp)nov 25, 2019

Te recomiendo que uses algo mas simple. 2 colores base, activo e inactivo. Asi te ahorras ese problema de 1 a la "n" que estas generando al querer aplicar tantos colores. Como ejemplo observa esta seccion que desarrollo el instructor:

 https://aprendible.com/preguntas

Si utilizas solamente 2 colores, basta con que resaltes las opciones seleccionadas y te evitas el problema de generar toda esa logica de colores. Siempre intenta irte por lo mas simple o complicaras de mas el desarrollo y tendras menos tiempo para pulir los detalles importantes.

Daniel (84 xp)nov 30, 2019

Gracias jorge creo que tienes razon no complicarme tanto la vida jejeje, asi con dos colores a quedado perfectamente, y mas que entendible