Vue 2 + Bootstrap-vue - attribut dynamique

Question

ceci est mes premiers pas dans Vue 2 + bootstrap vue, et je suis en train de comprendre comment changer dynamiquement le nom d'un attribut, de sorte que, à une petite résolution d'écran l'info-bulle change de position.

JS code ci-dessous fonctionne très bien, mais infobulle ne change pas sa position = ( S'il vous plaît me aider à améliorer mon erreur,

.pug

JS

'use strict'; 

import Vue from 'vue'; 
import BootstrapVue from 'bootstrap-vue'; 

document.addEventListener("DOMContentLoaded", function() { 
    Vue.use(BootstrapVue); 
    new Vue({ 
     el: '#freshbroccoli', 
     data: { 
      windowWidth: null, 
      position: this.windowWidth >= 480 ? 'left' : 'bottom' 
     }, 
     mounted() { 
      this.$nextTick(function() { 
       window.addEventListener('resize', this.getWindowWidth); 
       this.getWindowWidth(); 
      }); 
     }, 
     methods: { 
      getWindowWidth() { 
       this.windowWidth = document.documentElement.clientWidth; 
       console.log('this.windowWidth >= 480 ? \'left\' : \'bottom\'', this.windowWidth >= 480 ? 'left' : 'bottom', '\n', this.windowWidth); 
      } 
     }, 
     beforeDestroy() { 
      window.removeEventListener('resize', this.getWindowWidth); 
     } 
    }); 
}); 

navigateur - Chrome

console navigateur - Chrome

Answer 1

Edit: ma vieille réponse suppose que était un v-b-tooltip était une composante et non une directive. D'après ce que je peux dire, l'utilisation d'une variable dans une directive n'est pas supportée. Une solution serait d'utiliser vue-popper puisque vous pouvez mettre à jour ses options dynamiquement. Bootstrap utilise Popper sous le capot pour ses infobulles, donc vous n'introduiriez pas de nouvelles technologies de cette façon.