1
Это мой Mixin в Vue.js:Vue.js Mixin не работает должным образом в компоненте
var myMixin = {
data() {
clockInt: '',
clock: '',
currentTime: new Date()
},
mounted() {
this.intervalSetup();
},
methods: {
intervalSetup() {
var _this = this;
// init
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;
}
}
};
Это должно отображать простые цифровые часы, которые устанавливает время каждые 60-е годы.
Затем я зарегистрировать подмешать к Vue, требуют моего компонента и начать новый экземпляр Vue:
Vue.component('comp', require('./components/MyComponent.vue'));
Vue.mixin(myMixin);
const app = new Vue({
el: '#app'
});
Мой компонент выглядит следующим образом:
<template>
<div>{{ clock }}</div>
</template>
<script>
export default {
data() {
return {
someData: []
}
},
mounted() {
// call methods
},
methods: {
// some methods
}
};
</script>
Первый INIT в Mixin метод работает отлично, и, как я вижу в инструменте Vue dev, все данные также присутствуют. Но он не обновляет данные в интервале, который я установил.
Надеюсь, у кого-то были подобные проблемы и он может мне помочь.
Вы можете попробовать сначала: 'Vue.mixin (myMixin);' чем определить компонент: 'Vue.component ('comp', re ...'. – Saurabh
Это имеет тот же эффект. Первая инициализация работает отлично, но интервал не обновляет данные. –
IMOP Я думаю, что вы должны пойти с компонентом для часов вместо mixin, имеет больше смысла для меня. И глобальные миксины - это не очень хорошо, вы должны использовать его, только если вы действительно нужна определенная функциональность в каждом из ваших экземпляров vue. – AfikDeri