CODEWITHSUNDEEP
javascriptvue.js
William
William

Reputation: 241

Vuejs import / load javascript file

I need some help. I am trying to load my javascript file and listing to changing on checkbook when I click my checkbox to show or hide password. But for some reason it is not working. I have try everything, but out of ideas how to solve the problem. 

$(document).ready(function () {
 $('#showPassword').on('click', function () {
if ($(this).prop('checked')) {
  $('#password').attr('type', 'text')
} else {
  $('#password').attr('type', 'password')
}
})



<template>
<div class="container-fluid p-0">
<div class="col-md-12 content">
<div class="col-md-6 join-container" id="join-container">
  <form class="col-md-12 col-sm-12"
  >
    <div class="form-group">
      <label for="password">Password</label>
      <input type="password" class="form-control"
             id="password" v-model="password"
             placeholder="Password">
    </div>
    <div class="form-group pl-0">
      <div class="form-check">
       <input class="form-check-input" type="checkbox"
              id="showPassword" />
       <label class="form-check-label"
              for="show-password">Show Password</label>
      </div>
    </div>
    <br>
  </form>
</div>
</div>
</template>

<script>
import Main from '../script/Index.js'

export default {
  name: 'Register',
  data: () => ({

 }),
methods: {
},
components: {
 Main
}
}
</script>

Upvotes: 0

Views: 402

Answers (2)

Lanny Bose
Lanny Bose

Reputation: 1857

You're using jQuery event handlers (the $ bit) outside a script tag in a Vue component file. I wouldn't expect that code to do anything.

If you wanted that code to execute, you'd need it to be inside the <script> tags in your component. However, Vue already has event listeners (link to documentation), including listening for clicks on elements. There is no need to use two frameworks for this.

To implement a rough show password button (using your existing markup), here's how I'd do it (removing extra markup to highlight the important Vue-logic):

<template>
<div>
  <input :type="passwordType" v-model="password">
  <input v-model="showPassword" type="checkbox"/>
</div>
</template>

<script>

export default {
  data() {
    return {
      showPassword: false,
      password: ''
    }
  },
  computed: {
    passwordType() {
      if (this.showPassword) {
        return 'text'
      } else {
        return 'password'
      }
    }
  }
}
</script>

Upvotes: 1

Phil
Phil

Reputation: 164970

It's not advisable to mix jQuery and Vue since they have separate lifecycles.

Vue is able to do everything you're after by itself.

Simply bind your checkbox state to a Vue data property and use that to determine the password field's type, eg

<input :type="passwordFieldType" class="form-control"
       id="password" v-model="password"
       placeholder="Password">

<!-- snip -->

<input v-model="passwordFieldType" true-value="text" false-value="password"
       class="form-check-input" type="checkbox"
       id="showPassword">

data: () => ({
  passwordFieldType: 'password'
})

See https://v2.vuejs.org/v2/guide/forms.html#Checkbox-1

new Vue({
  el: '#app',
  data: () => ({
    password: '',
    passwordFieldType: 'password'
  })
})
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<form class="col-md-12 col-sm-12" id="app">
  <div class="form-group">
    <label for="password">Password</label>
    <input :type="passwordFieldType" class="form-control" id="password" v-model="password" placeholder="Password">
  </div>
  <div class="form-group pl-0">
    <div class="form-check">
      <input v-model="passwordFieldType" true-value="text" false-value="password"
             class="form-check-input" type="checkbox" id="showPassword" />
      <label class="form-check-label" for="show-password">Show Password</label>
    </div>
  </div>
  <br>
</form>

Upvotes: 1

Related Questions