如何避免 [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