Vue 2 + Bootstrap-vue - dynamisches Attribut

Question

dies ist meine erste Schritte in Vue 2 + Bootstrap-vue, und ich versuche, herauszufinden, wie dynamisch ein Attribut den Namen zu ändern, so dass bei Bei kleiner Bildschirmauflösung ändert der Tooltip seine Position.

JS-Code unten funktioniert gut, aber Tooltip nicht seine Position zu verändern = ( Bitte helfen Sie mir meine Fehler zu verbessern;

.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); 
     } 
    }); 
}); 

Browser - Chrome

Browser-Konsole - Chrome

Answer 1

Edit: meine alte Antwort angenommen, dass ein v-b-tooltip eine Komponente und keine Richtlinie war war.

Von was ich sagen kann, wird die Verwendung einer Variablen in einer Direktive nicht unterstützt. Eine Lösung wäre, vue-popper zu verwenden, da Sie seine Optionen dynamisch aktualisieren können. Bootstrap verwendet Popper unter der Haube für seine Tooltipps, so dass Sie auf diese Weise keine neuen Technologien einführen würden.