Vue.js and jQuery?

Question

Is it possible to use jQuery with Vue.js? I have a function this function that I want to use in my Vue component. The function basically slides the items in and out, but when I implemented using the <script> tags I got a list with all the items instead of the jQuery code working.

$("#slideshow > div:gt(0)").hide();

setInterval(function() {
$('#slideshow > div:first')
.fadeOut(0)
.next()
.fadeIn(1000)
.end()
.appendTo('#slideshow');
}, 5000);

How do I use that function in my code?

<template>
<div class="timer">
   <div class="title-block">
       <p class="title">MG de Jong</p>
       <p class="description">Sprint 1</p>
   </div>
   <div class="column">
     <div class="block">
         <p class="digit">{{ days | two_digits }}</p>
         <p class="text">Days</p>
     </div>
     <div class="block">
         <p class="digit">{{ hours | two_digits }}</p>
         <p class="text">Hours</p>
     </div>
     <div class="block">
         <p class="digit">{{ minutes | two_digits }}</p>
         <p class="text">Minutes</p>
     </div>
   </div>   
 </div>
</template>
<script>

export default {
props: {
   date: {
       type: Number
   },
},
data() {
   return {
       now: Math.trunc((new Date()).getTime() / 1000)
   }
},
mounted() {
   window.setInterval(() => {
       this.now = Math.trunc((new Date()).getTime() / 1000);
   },1000);


},
computed: {
   seconds() {
       return (this.modifiedDate - this.now) % 60;
   },
   minutes() {
       return Math.trunc((this.modifiedDate - this.now) / 60) % 60;
   },
   hours() {
       return Math.trunc((this.modifiedDate - this.now) / 60 / 60) % 24;
   },
   days() {
       return Math.trunc((this.modifiedDate - this.now) / 60 / 60 / 24);
   },
   modifiedDate: function(){
      return Math.trunc(Date.parse(this.date) / 1000)
   }
},
}
</script>

@thankd when I do that I see both the projects and I get the error: ReferenceError: $ is not defined — lucafj2j282j
– lucafj2j282j, Commented Mar 10, 2017 at 21:54
You can use It, but try to avoid that unless you really need it.Conceptually those two are different.The thing that you done with jQuery could be implemnted with pure VueJS easily. — Belmin Bedak
– Belmin Bedak, Commented Mar 10, 2017 at 21:54
Btw you have to install jQuery via npm, and import it like this import $ from 'jquery' and then it should work with mounted hook - or use jQuery instead of $ I think that should work too. — Belmin Bedak
– Belmin Bedak, Commented Mar 10, 2017 at 21:55
@BelminBedak how do you get it to work with Vue? Is that possible to replace the function for a Vue function? — lucafj2j282j
– lucafj2j282j, Commented Mar 10, 2017 at 21:56

tony19 · Accepted Answer · 2022-07-15 20:10:22Z

14

You can do that, but in most of cases, you don't need to.

If you are learning Vue, then try to think in Vue and just put jQuery away. In jQuery, you do things in imperative way; but now you should think in declarative way.
Do not manipulate the DOM by yourself directly. All the DOM manipulations should be handled by Vue, you just tell Vue what you want.

Vue provides Transition, your requirement can be done by this without jQuery at all. At first you may think it's not straightforward and want to solve it by jQuery, but once you get the point you will fall in love with it.

edited Jul 15, 2022 at 20:10

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Mar 11, 2017 at 4:05

CodinCat

16k6 gold badges51 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Daryn · Accepted Answer · 2017-08-18 10:14:28Z

As some of he comments mention, you could use a mounted function. For more details you can see this article: https://vuejsdevelopers.com/2017/05/20/vue-js-safely-jquery-plugin/

Here is a basic example using cleave.js:

<template>
    <input />
</template>

<script>
/* eslint-disable no-new */
import Cleave from 'cleave.js'

export default {
  mounted () {
    new Cleave(this.$el, {
      date: true,
      datePattern: ['d', 'm', 'Y']
    })

    this.$el.oninput = (e) => {
      console.log('oninput the field', e.target.value)
      this.$emit('oninput', e.target.value)
    }
  }
}
</script>

<style>

</style>

App.vue

<template>
  <div id="app">
    <smart-cleave @oninput="logIt"></smart-cleave>
    <div>{{date}}</div>
  </div>
</template>

<script>

/* eslint-disable no-new */
import Cleave from 'cleave.js'
import SmartCleave from './components/SmartCleave'

new Cleave('#plain-input', {
  date: true,
  datePattern: ['d', 'm', 'Y']
})

export default {
  name: 'app',
  components: {
    SmartCleave
  },
  data () {
    return {
      date: ''
    }
  },
  methods: {
    logIt (val) {
      console.log('cahnged', val)
      this.date = val
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* text-align: center; */
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Collectives™ on Stack Overflow

Vue.js and jQuery?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related