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

【问题标题】：How to passing computed with param to props of child component?如何将使用参数计算的参数传递给子组件的道具？
【发布时间】：2019-02-24 10:51:02
【问题描述】：

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

<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];
        }
    },          
}

【问题讨论】：

标签： vue.js vuejs2 vue-component

【解决方案1】：

计算属性是纯粹的。这意味着计算属性仅依赖于组件的状态，不应有副作用。这允许 Vue 仅在它们依赖的数据发生变化时重新计算计算属性。因此，您不能调用计算属性。你必须使用一种方法。

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

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

data () {
  fieldErrors: {}
},

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

【讨论】：