如何避免 [Vue 警告]：您可能在组件渲染 function 中有无限更新循环。 在 VUEJS 中

Question

How can I avoid infinite update loop in a component render function. in VUEJS

i create a simple show Password button, with this structure:

<div class="mt-4 switchContainerGenPassword">
    <div class="switchGeneratePassword">
        <label for="auto_generate_password" class="vs-input--label">{{$t('forms.formNewUser.autoGeneratePassword')}}</label>
        <vs-switch color="success" @change="controlGeneratePassword()" v-model="auto_generate_password" vs-icon="done" name="auto_generate_password" />
    </div>

    <div class="showPassword">
        <button class="showpasswordIcon" :click="controlShowPassword()">
            <vs-icon v-if="showPassword" icon="visibility_off" />
            <vs-icon v-else icon="visibility"></vs-icon>
        </button>
    </div>
    <vs-input class="w-full mt-4" v-model="userUassword" :readonly="auto_generate_password" :type="passwordType" :label="$t('forms.formNewUser.password')" v-validate="'required'" name="password" ref="password" />

    <span class="text-danger text-sm" v-show="errors.has('password')">{{ errors.first('password') }}</span>
</div>

this is my data method

  data() {
    return {
      userUassword : "",
      userPasswordConfirmation : "",
      showPassword : false, //check if password is showed or no ,
      passwordType : "password", //input password type 

    }
  },

i have an method named: controlShowPassword()

methods: {
   controlShowPassword(){
       this.passwordType = this.passwordType === 'text' ? 'password' :'text';
   },
}

how can How can I avoid infinite update loop in a component render function ?

Answer 1

Try:

<button class="showpasswordIcon" @click="controlShowPassword()">
  <vs-icon v-if="showPassword" icon="visibility_off" />
  <vs-icon v-else icon="visibility"></vs-icon>
</button>

Events need to use @ , it's a shorthand for v-on .

You mustn't use : (shorthand for v-bind ) for events.

More details in:

• https://v2.vuejs.org/v2/guide/syntax.html#v-on-Shorthand
• https://v2.vuejs.org/v2/guide/syntax.html#v-bind-Shorthand