如何避免 [Vue 警告]：组件渲染函数中可能存在无限更新循环。在 VUEJS 中答案

【问题标题】：How can I avoid [Vue warn]: You may have an infinite update loop in a component render function. in VUEJS如何避免 [Vue 警告]：组件渲染函数中可能存在无限更新循环。在 VUEJS 中
【发布时间】：2020-05-28 10:57:17
【问题描述】：

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

我创建了一个简单的显示密码按钮，结构如下：

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

【问题讨论】：

标签： javascript vue.js

【解决方案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 的简写）来表示事件。

更多细节在：

【讨论】：