Les Vuejs ne peuvent pas accéder aux réfs à partir du composant
j'essaie d'obtenir l'élément canvas qui est à l'intérieur d'un modèle de Composant, j'ai trouvé de bonnes documentations pour vuejs1 mais pas pour vuejs2 où "ref" est le seul moyen d'obtenir l'élément. J'obtiens l'objet cependant, mais quand j'essaie d'accéder à la variable il n'est pas défini.
mon html
<div id="app>
<template id="image-capture">
<div class="row" >
<canvas ref="icanvas" ></canvas>
</div>
</template>
</div>
Mon js
const ic = {
template: '#image-capture' ,
created () {
console.log(this.$refs); //this returns object
console.log(this.$refs.icanvas); // but this is undefined
}
}
const routes = [
{ path: '/ic', component: ic},
]
const router = new VueRouter({
routes
})
new Vue({
router,
}).$mount('#app')
j'ai besoin de l'élément icanvas.
3 réponses
created est déclenché avant que le modèle ne soit traité.
Vous pouvez trouver plus de détails ici: https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram
vous devriez pouvoir accéder aux $ refs sur le mounted événement
mounted: function() {
console.log(this.$refs.icanvas);
},
Vous pouvez utiliser la fonction $ nextTick (), le code à l'intérieur de $nextTick () sera exécuté après la mise à jour du DOM.
this.$nextTick(function () {
console.log(this.$refs.ANY_COMPONENT_REF)
})
j'ai eu exactement le même problème, dans mon cas je l'ai résolu en accédant à la réf dans la méthode qui change le v-if avec nextTick.
methods: {
open() {
this.show = true; //v-if condition
this.$nextTick(function() {
this.titleWidth = this.$refs.titleBg.clientWidth - 30;
});
}