🎁 50% de descuento en planes Mensual y PRO

3d: 11h: 4m:48s'
Daniel
Daniel
Vue.js
Comparte:

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

0
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
Jorge Davila (838 xp)
¿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
Daniel (84 xp)
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
Jorge Davila (838 xp)
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
Daniel (84 xp)
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
Jorge Davila (838 xp)
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>
1
Daniel
Daniel (84 xp)
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
Jorge Davila (838 xp)
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
Daniel (84 xp)
Gracias jorge creo que tienes razon no complicarme tanto la vida jejeje, asi con dos colores a quedado perfectamente, y mas que entendible
1