javascript - 如何返回带有参数的属性值？

Question

我刚刚开始使用 VueJS。我使用Quasar框架，带有its input component that provides an error state

<q-field :error="error" error-label="Oh buggers! You made a boo boo.">
   <q-input v-model="text" float-label="Colored with Error" color="amber"  />
</q-field>

我使用Vualidate检查表单中的多个输入，并且我想返回错误文本的上下文化和本地化版本作为 error-label 值。

对于 Blaze，我会使用带有参数的帮助器，例如 error-label="{{getError 'email'}}" 看起来像这样(未经测试的代码):

  getError(input) {
    let firstError = ""
    _.each(this.$v[input], function(validator) {
      if (!validator) { // eg. validator = 'required'
        firstError = i18n.__('input_error' + validator, {
          input
        }) // eg. firstError = 'The email field is required'
        break
      }
    })
    return firstError
  },

我不确定在 VueJS 中执行此操作的正确方法。我注意到 v-bind 指令可以接受参数，但我不知道如何(文档在没有示例的情况下提到它)也不知道它是否是正确的方法。

Answer 1

根据 Quasar 框架文档 error-label 是 prop，你可以像这样编写绑定(bind):

:error-label="getError('email')"