vue - When using v-bind:class, how can you interact with a nested computed property object value?

Question

vue - When using v-bind:class, how can you interact with a nested computed property object value?

Looking to assign a class to an inbox item in Vue when the value is equal to 'null'. I have almost achieved this, but there's one aspect I can't figure out. I've been following examples like https://v2.vuejs.org/v2/guide/class-and-style.html, but I have some specific requirements. I need to dynamically define a class based on the computed property value nested within my form. I have a form with multiple input fields (generated using v-for), and I should check each field's value and apply a specific class if certain conditions are met. I can achieve this initially, but struggling to update the class as the user changes the input values.

This is an example of the 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'"
>

Here is an example of one particular field type 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'"
  >

The recordComputed object is the main object (computed property) defined like this:

  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 it is typeof=='object', we set it as null
      if (!parValue && typeof (parValue) === 'object') {
        parValue = 'null'
      }
      record[input.PARAMETER_NAME] = parValue
    })
    return record
  },

My question is whether it's possible to read the value from a computed property reactively – specifically, one of its keys – in order to dynamically change the class for a specific input field. If there are alternative approaches, I'm open to suggestions.

javascript css vuejs2 watch

Answer 1

Answer №1

It is entirely 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 appears unusual

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

Why are you using input.PARAMETER_NAME=='null' as an index into the computed property? Also, there are too many square brackets. And using 'null' is quite strange, why not just use null?

Perhaps it should be like this?

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

Answer 2

It is entirely 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 appears unusual

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

Why are you using input.PARAMETER_NAME=='null' as an index into the computed property? Also, there are too many square brackets. And using 'null' is quite strange, why not just use null?

Perhaps it should be like this?

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

Answer 3

Answer №2

I devised a somewhat unconventional solution. Instead of simply evaluating against the value of a field, which is only effective for an initial assessment, I opted to create a new property called isNullText. Within a method named checkForNulls, I assigned true or false to this property based on the value of the recordComputed property. Here are the key components that helped me resolve the issue:

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

Next, within the methods section:

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
            }
        }
    }
}

Answer 4

I devised a somewhat unconventional solution. Instead of simply evaluating against the value of a field, which is only effective for an initial assessment, I opted to create a new property called isNullText. Within a method named checkForNulls, I assigned true or false to this property based on the value of the recordComputed property. Here are the key components that helped me resolve the issue:

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

Next, within the methods section:

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
            }
        }
    }
}

vue - When using v-bind:class, how can you interact with a nested computed property object value?

Answer №1

Answer №2

Similar questions

The script is unable to locate the property 'indexOf' because it is undefined

Only implement the CSS styles if there are multiple elements that have the same class

Is there a workaround using jQuery to enable CSS3 functionality across all browsers?

Basic Timer with Visual Background

php executing javascript - error

Execute JavaScript function with a delay once the webpage has finished loading

Looking for an easy solution in RegExp - how to locate the keys?

Error in electron-builder: Module 'dmg-license' was not found

What are some techniques for applying masking to various elements beyond just input fields within React?

Using Javascript to convert an SVG file into DOM elements

Preserve file sequence with jquery file upload

Refreshing CSS-Element-Queries following an ajax request

Encountering an error while populating the Google Charts API with data: "The column header row need to be in array format."

Choosing the right CSS selectors for elements within other elements

Utilize Apollo to retrieve a variety of queries at once

What is the method for accessing HTML tag data within a script?

Error Encountered in MERN Stack Development: TypeError Thrown Due to Inability to Convert Undefined

Converting a JavaScript dictionary into an array of documents: The ultimate guide

How to Toggle Div Visibility with AngularJS ng-show and ng-click

How to count the keys of an object in JavaScript that use dot notation?