Trying to pass data into computed property Vue JS

Question

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 computed property, I also need to pass the validation classes to it. For some reason, my computed 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.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>

Am I better off using a method for this?

Will Blair · Accepted Answer · 2021-04-07 09:45:20Z

3

Computed properties can’t take in parameters but technically you can return a function from the computed 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.

answered Apr 7, 2021 at 9:45

Will Blair

1034 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Boussadjra Brahim · Accepted Answer · 2021-04-07 10:00:53Z

1

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

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

edited Apr 7, 2021 at 10:00

answered Apr 7, 2021 at 9:33

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Collectives™ on Stack Overflow

Trying to pass data into computed property Vue JS

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related