Question

我的表单中包含动态数量的输入字段，我需要音译数据，并在'live'中传递给这些字段。我写了自定义指令，它可以完成所有工作，但是有一个错误 - ＆gt;它转换除了最后一个之外的所有字符（应该是привет-＆gt; privet，而привет-＆gt;priveт）。这是我的源代码

directives: {
  transliterate: {
    update(element, binding) {
      element.value = tr(element.value)
    }
  }
}

这是PUG（翡翠）

input(v-model='requestHotels.travellers[index].first_name', v-transliterate='true')

tr - 只是函数，从ru到en

的音译

我知道为什么会这样，但我不能自己解决。有什么想法吗？

Answer 1

1）考虑使用计算属性而不是指令。就个人而言，我不喜欢指令，因为它们会给你的代码增加很多无用的复杂性。但是有一些复杂的情况可能会非常有用。但这个不是其中之一。

export default {
  data: () => ({
    tranliteratedValue: ""
  }),
  computed: {
    vModelValue: {
      get() {
        return this.tranliteratedValue;
      },
      set(value) {
        this.tranliteratedValue = transl.transform(value);
      }
    }
  }
};

完整示例：https://codesandbox.io/s/039vvo13yv?module=%2Fsrc%2Fcomponents%2FComputedProperty.vue

2）您可以使用过滤器并在渲染期间进行音译

  filters: {
    transliterate(value) {
      return transl.transform(value);
    }
  }

然后在你的模板中：

  <p>{{ value | transliterate }}</p>

完整示例：https://codesandbox.io/s/039vvo13yv?module=%2Fsrc%2Fcomponents%2FFilter.vue

3）透明包装技术（使用自定义组件）

透明包装器背后的想法是你应该创建表现为内置输入的自定义组件（并接受相同的参数），但你可以截取事件并改变你喜欢的行为。在您的示例中 - 音译输入文本。

  <textarea
    v-bind="$attrs"
    :value="value"
    v-on="listeners"
  />

 computed: {
    listeners() {
      return {
        ...this.$listeners,
        input: event => {
          const value = transl.transform(event.target.value + "");
          this.$emit("input", value);
        }
      };
    }
  }

完整示例：https://codesandbox.io/s/039vvo13yv?module=%2Fsrc%2Fcomponents%2Finc%2FTransliteratedInput.vue

在此处阅读有关透明包装技术的更多信息https://github.com/chrisvfritz/7-secret-patterns/blob/master/slides-2018-03-03-spotlight-export.pdf

您可以在此处查看所有3种工作方法https://codesandbox.io/s/039vvo13yv

如何使用指令直接修改v-model值？

1 个答案: