Unable to change data value in vue-CodePudding

I have a button that toggles the password from **** to text. Since I have multiple of the same buttons, I wanted to use the same method to change the boolean value of the button depending on the argument passed.

<div  :>
  <input :type="asNewPassword ? 'password' : 'text'" v-model="adminNewPassword"  placeholder="New Password" required/>
  <span
    :
    :style="!asNewPassword ? {'color': primary   ' !important'} : {}"
     @click="togglePassword('asNewPassword')"
  >
     <i  :/>
  </span>
</div>

togglePassword: function (typeOfPassword) {
                typeOfPassword = !typeOfPassword
            }

asNewPassword: true,

The togglePassword("asNewPassword") is suppose to change its value from false to true and vice versa but method does not seem to work. I've tried using this.typeOfPassword but it doesn't work for me as well.

CodePudding user response：

Replace

@click="togglePassword('asNewPassword')"

With

@click="asNewPassword = !asNewPassword"

CodePudding user response：

You are passing a string as a value to your method and then trying to treat it as a Boolean value. You should define a property in your components local state (data function) and then toggle that; Here's the code:

<div  :>
  <input :type="asNewPassword ? 'password' : 'text'" v-model="adminNewPassword"  placeholder="New Password" required/>
  <span
    :
    :style="!asNewPassword ? {'color': primary   ' !important'} : {}"
     @click="togglePassword"
  >
     <i  :/>
  </span>
</div>

export default {
  data() {
    return {
      asNewPassword: true,
    };
  },
  methods: {
    togglePassword() {
      this.asNewPassword = !this.asNewPassword;
    },
  },
}