Tips on how to retrieve a variable from an array in Vue JS

Question

Tips on how to retrieve a variable from an array in Vue JS

New to Javascript and Vue, I am exploring examples to grasp the fundamental concepts.

<template>
  /*<p v-bind:class="['bold', 'italic', isValid ? 'valid' : 'invalid']">*/

  <p v-bind:class="classArray">
    Hello, {{name[0]}} {{name[1]}}
  </p>
</template>

<script>

export default {
  data() {
    return {     
      isValid: true,
      name: ['John','Doe'],
      classArray: ['bold', 'italic', isValid ? 'valid' : 'invalid']
      
    }
  }
}
</script>

<style>
  .bold    { font-weight: bolder }
  .italic  { font-style:  italic }
  .valid   { color: forestgreen  }
  .invalid { color: crimson      }
</style>

The code above triggers the following error -

ERROR [eslint] /js/vue3/src/App.vue 16:38 error 'isValid' is not defined no-undef

✖ 1 problem (1 error, 0 warnings)

How can I access 'isValid' within the classArray?

javascript vue.js vuejs3

Answer 1

Answer №1

Perhaps consider implementing a computed property called `classArray` to ensure it accurately references the `isValid` data attribute within the component. Give it a try!

<template>
  <p v-bind:class="classArray">
    Hello, {{ name[0] }} {{ name[1] }}
  </p>
</template>

<script>
export default {
  data() {
    return {     
      isValid: true,
      name: ['John', 'Doe']
    }
  },
  computed: {
    classArray() {
      return ['bold', 'italic', this.isValid ? 'valid' : 'invalid'];
    }
  }
}
</script>

<style>
  .bold    { font-weight: bolder }
  .italic  { font-style:  italic }
  .valid   { color: forestgreen  }
  .invalid { color: crimson      }
</style>

Answer 2

Perhaps consider implementing a computed property called `classArray` to ensure it accurately references the `isValid` data attribute within the component. Give it a try!

<template>
  <p v-bind:class="classArray">
    Hello, {{ name[0] }} {{ name[1] }}
  </p>
</template>

<script>
export default {
  data() {
    return {     
      isValid: true,
      name: ['John', 'Doe']
    }
  },
  computed: {
    classArray() {
      return ['bold', 'italic', this.isValid ? 'valid' : 'invalid'];
    }
  }
}
</script>

<style>
  .bold    { font-weight: bolder }
  .italic  { font-style:  italic }
  .valid   { color: forestgreen  }
  .invalid { color: crimson      }
</style>

Answer 3

Answer №2

To create a getter called classArray, define it to evaluate the current value of isValid within the object.

export default {
  data() {
    return {     
      isValid: true,
      name: ['Alice','Smith'],
      get classArray() { return ['highlight', 'underline', this.isValid ? 'valid' : 'invalid']; }
      
    }
  }
}

Answer 4

To create a getter called classArray, define it to evaluate the current value of isValid within the object.

export default {
  data() {
    return {     
      isValid: true,
      name: ['Alice','Smith'],
      get classArray() { return ['highlight', 'underline', this.isValid ? 'valid' : 'invalid']; }
      
    }
  }
}

Tips on how to retrieve a variable from an array in Vue JS

Answer №1

Answer №2

Similar questions

Using TypeScript and the `this` keyword in SharePoint Framework with Vue

Combining various FormGroup types into a single object type in Angular 5

Troubleshooting the Width Problem in Bootstrap 5 Dropdowns

Web application error: Karma and Webpack cannot locate Angular controller

Is there a new update to Google Maps API?

Quantifying the passage of time for data entry

Tapping into the space outside the MUI Modal Component in a React application

Utilizing AJAX to fetch and retrieve a JSON array

Combining CodeIgniter4 with Vue.js and Webpack's devServer to handle CORS issues

JQuery Ajax encounters a 500 error message due to an internal server issue

Challenges with optimization in AngularJS and Angular Material

Error message in VueJS TypeScript: Implicit declaration of type 'props' as 'any'

The alpha value returned by gl.readPixels in Three.js will consistently be 255

What is the proper method for activating the lights in a traffic light sequence?

Obtaining the IP address of the client's request

Looking for assistance with a JavaScript code snippet

Having trouble importing images in React and passing them as a prop?

Adjust the width of the dropdown menu for the v-combobox

Enhance the size of dynamically generated svg elements by scrolling the mouse wheel in and out

When using multiple select tags with *ngFor in Angular, modifying the value of the first select tag will have an