vue - v-bind:class . . how to react with a value of computed property object (nested)?

Question

Need to assign a class to a value of inbox item in vue, when the value is string='null'. I almost got it to work, however, am unable to figure out one thing. Been following this examples https://vuejs.org/v2/guide/class-and-style.html, however, have some specifics. I need to be able to define class based on the value of computed property . . nested . . I have a form with a bunch of input fields (v-for), and I should check value for each and assign specific class if a condition is meet. I can do this only initially, but not when user starts to change input value.

this is for loop:

<div
  class="form__field form__field--autocomplete"
  v-for="input in info"
  :key="input.PARAMETER_NAME"
  v-if="input.PARAMETER_NAME != 'p_euser' && input.PARAMETER_NAME != 'p_dbuser_password'"
>

and this is one example of field . . there are others, based on the input.DATA_TYPE

<input
    v-else-if="input.DATA_TYPE == 'smallint' || input.DATA_TYPE == 'int'"
    v-model="recordComputed[input.PARAMETER_NAME]"
    type="number"
    class="form__field-input"
    v-bind:class="['', { 'nullclass' : [recordComputed[input.PARAMETER_NAME=='null']] }]"
    :disabled="input.i2_primary_key == '1' && method == 'edit'"
  >

So . .recordComputed is main object (computed property . . ) defined as:

  recordComputed: {
   get () {
    let record = this.record
    this.info.forEach((input) => {
      var parValue = this.selected[input.i2_header_db]

      // if we do not have parValue and also it is an typeOf=='object', than we set it as null
      if (!parValue && typeof (parValue) === 'object') {
        parValue = 'null'
      }
      record[input.PARAMETER_NAME] = parValue
    })
    return record
  },

So my question is . . . is it possible to "reacively" read value from computed property . . one of its keys value in order to change class only for this particular input field. If there are alternatives, would be open to suggestions.

Answer 1

It is perfectly possible...

<template>
  <div>
    <div v-for="input in inputs" :key="input.id">
      <input type="text" :class="{ active : getIsActive[input.id - 1] }" :value="input.name">
    </div>
    <input type="checkbox" v-model="odd"> Odd ?
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      inputs: [
        { name: "input 1", id: 1 },
        { name: "input 2", id: 2 },
        { name: "input 3", id: 3 },
        { name: "input 4", id: 4 }
      ],
      odd: false
    };
  },
  computed: {
    getIsActive() {
      return this.inputs.map(item => item.id % 2 === (this.odd ? 1 : 0));
    }
  }
};
</script>

<style scoped>
.active {
  background-color: #42b983;
}

input {
  margin: 10px;
}
</style>

Your class binding seems strange

v-bind:class="['', { 'nullclass' : [recordComputed[input.PARAMETER_NAME=='null']] }]"

Why you using input.PARAMETER_NAME=='null' as and index into computed property ? Also too much square brackets. And 'null' is really strange, why don't just use null ?

Maybe it should be like this ?

v-bind:class="{ 'nullclass' : recordComputed[input.PARAMETER_NAME]==='null' }"

Answer 2

I found relatively dirty solution. Instead of evaluating against the value of the field, which only works for initial assessment, I created another property (isNullText), and in a method checkForNulls assign true or false based on the value of recordComputed property. So . . this are pieces that solved it for me:

data() {
    return {
        isNullText:[]
    }
}

then in methods:

methods: { checkForNulls () { for (let [key, value] of Object.entries(this.recordComputed)) { console.log(${key}: ${value}) if (value === 'null') { this.isNullText[key] = true } else { this.isNullText[key] = false } } } }