vue js input скрыть текст если в нем есть подстрока
есть такой элемент на странице
<input type="text" name="email" class="form-control"
v-if="partner.email.includes('[email protected]')"
:class="{ 'is-invalid': form.errors.has('email') }"
v-text="false"
v-model="form.email">
я пытаюс сделать так чтобы если мыло содержит подстроку [email protected] юзер видел пустое поле и мог бы туда вписать свое реальное мыло. Проблема вв том что v-model как я понимаю биндит это с данными и сразу отображает то что там есть. Как можно скрыть текст в инпуте если он содержит подстроку но оставить возможность его редачить не потеряв связь с самим атрибутом?
Ответы (1 шт):
Автор решения: Vladimir
→ Ссылка
Попробуй вот такой вариант. Если передашь в setValue то что нужно игнорить, то подстрока удалится, но и между тем сохраниться возможность запилить такое же мыло в инпут, вдруг у кого то как раз такое)
<div id="app">
<input type="text" v-on:input="checkField" :value="setValue('[email protected]')">
<button @click="getText">
Test
</button>
</div>
new Vue({
el: '#app',
data: {
ignoreValueReg: /fake\@fake.fake/gi,
text: ''
},
computed: {
setValue () {
return (defaultParam) => {
if (defaultParam) {
return defaultParam.replace(this.ignoreValueReg, '')
}else{
return this.text.replace(this.ignoreValueReg, '')
}
}
}
},
methods: {
checkField (e) {
this.text = e.target.value;
},
getText () {
console.log(this.text)
}
}
});