Javascript and Vue beginner here. Trying out examples to learn the basic 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>
Above code throws up 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 do I access ‘isValid’ inside the classArray?
2
Answers
Define
classArray
as a getter that checks the current value ofisValid
of the object.You can maube use a computed property for classArray so that it can correctly reference
isValid
from the component’s data. Have a shot