防止Vue中的v-model更改

<template>
  <input v-model="computedValue" />
</template>

<script>
export default {
  data() {
    return {
      inputValue: '',
    };
  },
  computed: {
    computedValue: {
      get() {
        return this.inputValue;
      },
      set(value) {
        if (value !== 'restricted') {
          this.inputValue = value;
        }
      },
    },
  },
};
</script>

<template>
  <input v-model="inputValue" v-restricted />
</template>

<script>
export default {
  data() {
    return {
      inputValue: '',
    };
  },
  directives: {
    restricted: {
      update(el, binding, vnode) {
        if (binding.value !== 'restricted') {
          vnode.componentInstance.$emit('input', binding.value);
        }
      },
    },
  },
};
</script>

<template>
  <input v-model="inputValue" />
</template>

<script>
export default {
  data() {
    return {
      inputValue: '',
    };
  },
  watch: {
    inputValue(value) {
      if (value === 'restricted') {
        this.inputValue = '';
      }
    },
  },
};
</script>