I've created a mixin in Vue.js for a simple digital watch:
var myMixin = {
data () {
clockInt: '',
clock: '',
currentTime: new Date()
},
mounted () {
this.intervalSetup();
},
methods: {
intervalSetup () {
var _this = this;
// initialize
this.getTime();
// start interval every 60s
this.clockInt = setInterval(
_this.getTime(), 60000
);
},
getTime () {
var now = this.currentTime,
h = now.getHours(),
m = now.getMinutes();
this.clock = h + ':' + m;
}
}
};
This mixin should update the time display every 60 seconds.
To use the mixin, I register it to Vue, import my component, and create a new Vue instance:
Vue.component('comp', require('./components/MyComponent.vue'));
Vue.mixin(myMixin);
const app = new Vue({
el: '#app'
});
Here is what my component code looks like:
<template>
<div>{{ clock }}</div>
</template>
<script>
export default {
data () {
return {
someData: []
}
},
mounted () {
// call other methods here
},
methods: {
// define additional methods here
}
};
</script>
The initial setup of the mixin method works fine and the data is present in the Vue developer tools. However, the data does not refresh at the set interval as expected.
If anyone has encountered similar issues or knows how to fix this, I would appreciate your help.