Как сделать так, чтобы содержимое входного файла было зашифровано и не зашифровано в Vue?

Question

У меня есть поле ввода, и я хочу, чтобы содержимое показывало «ab **** gh», и я мог переключать содержимое одним щелчком, чтобы прочитать «abcdefgh».В основном раскрыть, а не раскрыть.У меня возникают проблемы с реактивностью значения при его изменении.Ниже приведен частичный код, с которым я работал.

В основном я пытаюсь заменить содержимое ввода на зашифрованное значение

Может кто-нибудь увидеть, где я ошибаюсь?

regex_hide_characters: /(?<!^).(?!$)/g,
inputValue: this.value,
encryptedInputValue: this.value.replace(this.regex_hide_characters, '*'),

hidePrivateContent() {
    this.reveal = !this.reveal;
    if (!this.reveal) {
        this.$refs.input.value = this.encryptedInputValue;
     }
},

Answer 1

Вот очень простой пример того, как вы могли бы достичь чего-то подобного:

new Vue({
 el: '#app',
 computed: {
  hiddenPass() {
    if (this.isPass) return this.pass.slice(0, 2) + '*******';
    return this.pass;
  }
 },
 data() {
  return {
    isPass: true,
    pass: 'abc124defg'
  }
 },
 methods: {}
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app" v-cloak>
  <div>{{hiddenPass}}</div>
  <button @click="isPass=!isPass">toggle view</button>
</div>

В этом фрагменте я пользуюсь computed properties, чтобы на основе данных экземпляра определить, как показывать «защищенный» проход.

Надеюсь, это поможет!