Css 如果两个变量与VueJS相等，则设置输入类

我希望我的

类的值

$event.target.value

等于我的Vuex状态变量

this.$store.state.company.name

时设置为

saved

如何设置它？

在文档中签出，您可以将

保存的

类绑定到一个计算属性，该属性检查输入是否等于Vuex状态变量，下面是一个示例：

newvue({
el:“应用程序”，
数据：{
输入数据：“”，
},
计算：{
已验证（）{
//在这里，我们应该比较vuex和用户输入的数据
返回此值。inputData==“mohd”
}
}
})

。已保存{
边框：1px绿色实心；
}

写mohd来验证它

输入保存.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>

在这里解决：，事实上，您可以使用纯JavaScript解决它

只需对附加到事件
@input
（每次输入值在keyup上更改时抛出谁）的所有动力学生成的输入实例化
check
方法即可

我不认为我可以使用数据和计算：来实现这一点，因为我的输入是根据Vuex对象动态创建的？或者是否有其他方法从isEqual访问其值？myInput已经是动态的。试试这个代码。如果您想检查myInput，只需在标记下面添加{{myInput}}。不要忘记将此代码包装到根标记中。我无法设置
v-model=“myInput”
，因为我已经有
：value=“this.$store.state.company.name”
.data（）{myInput:this.myGetter//this.$store.state.company.name}
<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")
            }
        }
     }
})