I have a project that uses Vue JS, more specifically, Nuxt JS. In my web page I need to render some classes onto an element that exists within a v-for, so I need to be able to pass data to some puted property, I also need to pass the validation classes to it. For some reason, my puted property isn't accepting my arguments, what am I doing wrong?

The error I'm getting is:

_vm.getClassesForDataItem is not a function

And my code is:

<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="; 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 {
  puted: {
    getClassesForDataItem () {
      if (classes) return classes
      return ui ? 'border-indigo-300 ring-indigo-50' : 'border-gray-300 ring-gray-50'
    }
  }
}
</script>

Am I better off using a method for this?

I have a project that uses Vue JS, more specifically, Nuxt JS. In my web page I need to render some classes onto an element that exists within a v-for, so I need to be able to pass data to some puted property, I also need to pass the validation classes to it. For some reason, my puted property isn't accepting my arguments, what am I doing wrong?

The error I'm getting is:

_vm.getClassesForDataItem is not a function

And my code is:

<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/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 {
  puted: {
    getClassesForDataItem () {
      if (classes) return classes
      return ui ? 'border-indigo-300 ring-indigo-50' : 'border-gray-300 ring-gray-50'
    }
  }
}
</script>

Am I better off using a method for this?

• javascript
• vue.js
• nuxt.js

Share Improve this question Follow edited Apr 7, 2021 at 9:41 Ryan H asked Apr 7, 2021 at 9:31 Ryan HRyan H 2,99566 gold badges5656 silver badges157157 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

Computed properties can’t take in parameters but technically you can return a function from the puted property that takes in a parameters:

getClassesForDataItem() {
    return ui => ui ? 'border-indigo-300 ring-indigo-50' : 'border-gray-300 ring-gray-50';
}

You can also move it to a method, see here for an explanation between the two options.

Try to return a function with parameters from your puted property :

export default {
  puted: {
    getClassesForDataItem () {
      return (ui, errorClasses) => errorClasses || (ui ? 'border-indigo-300 ring-indigo-50' : 'border-gray-300 ring-gray-50')
    }
  }
}