[Vuejs]-How to directly modify v-model value using directives?

0👍

1) Consider using computed property instead of directive. Personally, I don’t like directives because they can add alot of useless complexity to your code. But there are some complex cases where they can be really useful. But this one is not one of them.

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

Full example: https://codesandbox.io/s/039vvo13yv?module=%2Fsrc%2Fcomponents%2FComputedProperty.vue

2) You can use filter and transliterate during render

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

Then in your template:

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

Full example: https://codesandbox.io/s/039vvo13yv?module=%2Fsrc%2Fcomponents%2FFilter.vue

3) Transparent wrapper technique (using custom component)

The idea behind transparent wrapper is that you should create custom component that behave as build-in input (and accepts the same arguments) but you can intercept events and change behaviour as you’d like. In your example – tranliterate input text.

  <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);
        }
      };
    }
  }