Как правильно вызвать метод компоненты из родителя Vue?

Question

[danilr]

Есть компонента с инпутом, у которой при клике на один из ее блоков меняется тип с 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>

визуально выглядит так - по клику на глазик - меняется тип, но с ошибкой

Answer 1

[Сергей delphinpro]

Причем здесь пропс itemPass?
Вы меняете type. Хотя вы его и не описали в списке свойств компонента, но передали по факту и Vue об этом знает.
Короче говоря, у вас есть пропс type. Пропсы менять нельзя изнутри, а вы меняете. Вот вам и ошибка.

Меняйте это

if(this.type == 'password') this.type = 'text'
        else this.type = 'password'

на генерацию ивентов, снаружи ловите этот ивент и снаружи же меняйте тип.

АПД

Либо сделайте так, как предлагает сам Vue в описании ошибки

Добавьте вычисляемое свойство myType()
используйте его на инпуте :type="myType"
и меняйте какой-то внутренний флаг, не трогая внешнее свойство type

Comments

[danilr]

Второй вариант мне больше нравится ибо все методы должны остаться в компоненте. Можете написать как это будет выглядеть, я до конца не понимаю?

[Сергей delphinpro]

danilr, Да, второй лучше. С первым в данном случае я поспешил.
как-то так

data {
  …
  myType: this.type, // начальное значение из внешнего пропа
}

showPass(){
      if(this.myType == 'password') this.myType = 'text'
        else this.myType = 'password'
      },

<input :type="myType">

[danilr]

Сергей delphinpro, идеально - отлично работает, спасибо! Сейчас еще хочу один значимый вопрос написать по архитектуре валидации input, если что, добро пожаловать))