My JavaScript function displays a color border when required and changes the color if anything is inputted. It works fine in plain JavaScript but not in Vue.
I need to use this function in Vue, on any place or component.
app.js
$('.req' ).on('keyup', function() {
let val = this.value
val = $.trim(val)
if(val==""){
$(this).removeClass('valid');
}else{
$(this).addClass('valid');
}
});
$('.req').change(function() {
let val = this.value
val = $.trim(val)
if(val==""){
$(this).removeClass('valid');
}else{
$(this).addClass('valid');
}
})
Anyplace.blade.php
<form>
<input type="text" class="req form-control " name="last_name">
</form>
app.css
.valid{
border-left: 2px solid #9cff2b !important;
}
.req{
border-left: 2px solid red;
}
component-example.vue
<template>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">papa</div>
<div class="card-body">
papa. esto viene del hijo {{ messaje }}
<br>
<input type="text" v-model="modelo" class="req ">
</div>
</div>
<hijo :numero=modelo @verInfo="recibirpapa" > </hijo>
</div>
</div>
</div>
</template>
<script>
export default {
mounted() {
console.log('Component papa.')
},
data(){
return{
modelo:"",
messaje:''
}
},methods:{
recibirpapa(valor){
this.messaje = valor;
}
},
}
</script>