试图将数据传递到计算属性Vue JS

Question

我有一个使用 Vue JS 的项目，更具体地说，是 Nuxt JS。在我的网页中，我需要将一些类渲染到存在于v-for 中的元素上，因此我需要能够将数据传递给一些计算属性，我还需要将验证类传递给它。出于某种原因，我的计算属性不接受我的参数，我做错了什么？

我得到的错误是：

_vm.getClassesForDataItem 不是函数

我的代码是：

<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>

我最好使用一种方法吗？

Answer 1

计算属性不能接受参数，但从技术上讲，您可以从接受参数的计算属性返回一个函数：

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

您也可以将其移至方法中，请参阅here 了解两个选项之间的说明。

Answer 2

尝试使用计算属性中的参数返回一个函数：

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