Vuejs import / load javascript file

Question

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>

The jQuery is not mix with the vue code. The jQuery code is inside my Index.js file and I import that file in my vue. — William
– William, Commented May 10, 2020 at 23:49

tony19 · Accepted Answer · 2022-07-16 00:43:29Z

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>

tony19 · Accepted Answer · 2022-07-15 02:40:56Z

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>

Collectives™ on Stack Overflow

Vuejs import / load javascript file

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related