I'm currently working on a project that involves Vue JS, specifically Nuxt JS. Within my web page, I am required to render certain classes onto an element that exists within a v-for loop. To achieve this, I need to pass data to a computed property along with validation classes. However, I am encountering an issue where my computed property is not accepting the arguments. What could be the mistake I am making?
The error message I see is:
_vm.getClassesForDataItem is not a function
Below is the snippet of my code:
<template>
<div>
<ul v-for="(source, table, sourceIndex) in editor.sources" :key="sourceIndex" class="mb-3">
<li>
<!-- Data Source (Table) -->
<validation-provider
name="data source"
:rules="{ required: { allowFalse: false } }"
v-slot="{ errors, classes }"
>
<label :for="'source-'+sourceIndex" class="font-medium text-gray-700 cursor-pointer block p-4 border rounded-md ring-2" :class="getClassesForDataItem(source.isChecked, classes)">
<div class="flex">
<div class="flex-1">
<p class="text-xs font-medium text-gray-400">Data Source</p>
<h5 class="text-sm font-bold text-gray-500" :class="source.isChecked ? 'text-indigo-600' : ''">{{ table }}</h5>
</div>
<div v-if="source.isChecked" class="flex-1 items-center flex justify-end" :class="source.isChecked ? 'text-indigo-600' : ''">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" height="24" width="24" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
</div>
<input :id="'source-'+sourceIndex" v-model="source.isChecked" type="checkbox" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded cursor-pointer hidden">
</label>
<span class="text-xs text-red-500">{{ errors[0] }}</span>
</validation-provider>
</li>
</ul>
</div>
</template>
<script>
export default {
computed: {
getClassesForDataItem () {
if (classes) return classes
return ui ? 'border-indigo-300 ring-indigo-50' : 'border-gray-300 ring-gray-50'
}
}
}
</script>
Should I consider using a method instead of a computed property for this scenario?