Есть компонента с инпутом, у которой при клике на один из ее блоков меняется тип с password на текст и обратно, но кода я делаю это, в консоли ошибка : "[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "type"
вот компонента
<template>
<div class="input-root-wrapper"
:class="{ 'has-error': invalid }"
>
<label class="input-label" :for="inputIdFront">
<span
v-if="labelText.length"
class="input-label-text"
:class="labelClass">
{{labelText}}
</span>
<span class="input-wrapper">
<span class="input-placeholder" v-if="showPlaceholder">
{{placeholder}}
</span>
<span class="item-logo-pass-default" :class="{'item-logo-pass': itemPass}" @click="showPass()"></span>
<input
ref="input"
@input="input"
@change="change"
@focus="focus"
@blur="blur"
:name="inputName"
class="input"
:id="inputIdFront"
:type="type"
placeholder=""
:value="value"
autocomplete="off"
:class="{'item-logo-pass-input': itemPass}"
>
</span>
</label>
</div>
</template>
<script>
import Inputmask from 'inputmask'
import {getRandomId} from '@/common-utils.js'
export default{
data () {
return {
inFocus: false,
showPlaceholder: false,
inputIdFront: ''
}
},
props: {
itemPass:{
type: Boolean,
default: false
},
value: {
default: ''
},
invalid: {
type: Boolean,
default: false
}
},
watch: {
value (val) {
this.showPlaceholder = !val
}
},
methods: {
showPass(){
if(this.type == 'password') this.type = 'text'
else this.type = 'password'
},
input: function (event) {
this.$emit('input', event.target.value)
},
change: function (event) {
this.$emit('change', event.target.value)
},
focus: function () {
this.inFocus = true
this.showPlaceholder = false
},
blur: function () {
this.inFocus = false
let strValue = this.value+''
if (!strValue.length) {
this.showPlaceholder = true
}
}
}
</script>
вот тут использую компоненту с пропсом itemPass
<InputText
:value="userPassword"
:placeholder="'Новый пароль'"
:labelText="'Пароль'"
:type="'password'"
:itemPass="true"
@input="handleUserPassword($event)"
></InputText>
визуально выглядит так - по клику на глазик - меняется тип, но с ошибкой
Средний