Set input class if two variables are equal with VueJS - css

Question

I'd like my <input> class to be set to saved when its value $event.target.value is equal to my Vuex state variable this.$store.state.company.name.
How should I set it ?

Answer 1

Check out Class and Style Bindings in the docs, you could bind saved class to a computed property which checks if the input equals Vuex state variable, here is an example:
new Vue({
el:"#app",
data: {
inputData : '',
},
computed: {
validated(){
// Here we should compare data from vuex and the user input
return this.inputData == "mohd"
}
}
})
.saved {
border: 1px green solid;
}
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.13/dist/vue.min.js"></script>
<div id="app">
<label> write mohd to validate it</label>
<input type="text" :class="{saved: validated}" v-model="inputData">
</div>

Answer 2

InputSave.vue
<template>
<input type="text" v-model="myInput" :disabled="isEqual" :class="isEqual ? 'saved" : ''" />
</template>
<script>
import { mapGetters } from 'vuex'
export default {
data() {
myInput: ''
},
methods: {
...mapGetters
},
computed: {
isEqual: function() {
return this.myInput === this.myGgetter
}
}
}
</script>

Answer 3

Solved here : https://jsfiddle.net/9a9cvu7b/10/ , in fact you can solve it with plain JavaScript.
Just instanciate the check method on all your dynamics generated inputs attached to event #input (who is thrown each time the input value change on keyup)
<div id="app">
<input
type="text"
#input="check">
</div>
const app = new Vue({
el:'#app',
data() {
return {
wordToCheck: 'toto'
}
},
methods: {
check(event) {
const input = event.target;
// replace this.wordToCheck by this.$store.state.company.name
if(input.value === this.wordToCheck) {
input.classList.add("saved")
} else {
input.classList.remove("saved")
}
}
}
})