necesito saber si hay alguna manera de pasar esta funcion de JS a Vuejs
$(document).ready(function(){
$("#{{$users->id}}").hover(function(){
$("{{$users->id}}").css("background-color", "#000000");
}, function(){
$("{{$users->id}}").css("background-color", "#C3C3C3");
});
});
Teniendo en cuenta que <?$user->getObject(user_id)?>
viene desde una Base de datos y desde la misma vista donde se imprime todo, con vue estoy informado que debo pasar las variables al template desde laravel
A lo que me refiero
tengo un foreach para mostrar una lista de Usuarios por asi decirlo
<button class="btn" style="backgroundColor = "{{$ocupations->color}}" id="{{$users->id">{{$ocupations->ocupation}}</button> //el color en Hex almacenado en la bd
<lu>@foreach($users as $user)
<li id="{{$user->id}}">{{$user->id}}</li>
<li>{{$user->name}}</li>
<li>{{$user->email}}</li>
@endforeach
</lu>
Basicamente me muestra botones n numero de botones, con un color diferente, y el script lo que hara es hacer un hover dependiendo del id y del color, si el color de la primera ocupacion es azul, los usuarios se pintaran de azul, y el color de la segunda ocupacion es amarillo, hara un hover amarillo a los usuarios con la segunda ocupacion
he cambiado un poco el script para que no tengan confusiones
props
que puedes mandar desde blade, te recomiendo que en blade uses{{ }}
en lugar de<?= ?>
CSS
. Es realmente necesario hacerlo desdeJS
? Podrías asignarle una clase al elemento que te importa, hacer el cambio del color de fondo desdeCSS
y listo.