Question

我是Vuejs的新手。我正在尝试将带参数的计算传递给子组件的props，但这是错误的。这是我的代码：

<FloatingInput
    :type="'text'"
    :name="'username'"
    :error="fieldError('username')"
>
<FloatingInput
    :type="'password'"
    :name="'password'"
    :error="fieldError('password')"
>

在脚本中：

computed: {
    fieldError: {
        get: function () {
            return this.error[field]; // will return false or message error
        },
        set: function (field) {
            this.error[field];
        }
    },          
}

Answer 1

计算的属性是纯净的。这意味着计算出的属性仅依赖于组件的状态，并且不应有副作用。这使得Vue仅在它们依赖的数据发生更改时才重新计算计算的属性。因此，您不能调用计算属性。您必须使用一种方法。

幸运的是，您要做的只是在对象中进行键查找，因此您只需使用数据属性并查找字段即可。

<FloatingInput
  type="text"
  name="username"
  :error="fieldErrors['username']"
>

data () {
  fieldErrors: {}
},

methods: {
  setFieldError(field, error) {
    this.$set(this.fieldErrors, field, error);
  }
}

如何将用参数计算的传递给子组件的道具？

1 个答案: