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

Question

如何避免infinite update loop in a component render function. 在 VUEJS 中

我創建了一個簡單的顯示密碼按鈕，結構如下：

<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>

這是我的數據方法

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

    }
  },

我有一個名為： controlShowPassword()的方法

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

如何避免infinite update loop in a component render function ？

Answer 1

嘗試：

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

事件需要使用@ ，它是v-on的簡寫。

您不能使用: （ v-bind的簡寫）來表示事件。

更多細節在：

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