VueJS -在定义其他绑定时重用属性(字段名)

Question

我不知道如何准确地命名它，我在Vue中有一些表单，它由不同的输入类型组成，或者更复杂的包装元素，甚至是自定义组件。但它们都有一个共同点--它们的fieldName用于检查各种东西，如验证、类绑定等。

示例：

 <div class="field">
     <div class="label">Product name</div>
     <input :value="productName" @input="valueChanged" :class="{ changed: isChanged('productName') }" data-field="productName">
</div>

如您所见，productName在一行中重复了3次。我在dataset中使用它，以便valueChanged方法(全局混合)知道字段名称已更改，然后在类绑定中检查value是否已更改以正确设置样式，接下来是值绑定本身。

它变得越来越大，因为我想添加另一个类绑定，比如error: hasErrors('productName')

有没有办法只定义一次字段名，然后在其他绑定中重用它？这仍然需要一些重复，但至少在将来更改字段名称将是一次更改，而不是4-5次。如下所示：

<input :fName="productName" :value="fName" @input="valueChanged" :class="{changed: isChanged(fName), error: hasErrors(fName)" :data-field="fName">

我知道将其包装在某个自定义组件中可能是一种方法，但这将需要许多不同的条件才能正确呈现内容，因为我正在使用具有不同结构的各种字段类型。我需要重写一半的应用程序。

Answer 1

这里有两个潜在的解决方案：

1. 使用v-bind并生成一个具有

所需所有属性的对象

<input v-bind="getAttrs('productName')" @input="valueChanged" />

...

methods: {
  getAttrs(fieldName) {
    return {
      value: this[fieldName],
      class: {
        changed: this.isChanged(fieldName),
        error: this.hasErrors(fieldName)
      },
      'data-field': fieldName
    }
  }
}

1. 将所有字段存储在一个变量中并遍历它们：

<div
  v-for="field in fields"
  class="field"
>
  <div class="label">
    Product name
    // Or e.g. {{ field.label }} if you have an array of field objects
  </div>
  <input
    :value="getValue(field)"
    :class="{ changed: isChanged(field), error: hasErrors(field) }"
    // Still need to use v-bind to generate the data attribute on the fly
    v-bind="getDataAttr(field)"
    @input="valueChanged"
  />
</div>

...

data() {
  return {
    fields: [
      'fieldName1',
      'fieldName2',
      'fieldName3'
    ],
  }
},
methods: {
  getValue(fieldName) {
    return this[fieldName];
  },
  getDataAttr(fieldName) {
    return {
      'data-field': fieldName
    }
  }
}

Answer 2

我相信让自定义组件处理输入字段是最聪明的方式。我不认为，会有那么多的条件，即使有一些解决办法，你仍然需要重写你的应用程序的一半。您可以使用input type作为属性，因此您可以为不同的字段类型使用component，如果有许多不同的结构，您可以使用slots来添加一些自定义结构。