ヴュー2 +ブートストラップ-VUEは - 動的属性

Question

これはVueの2 + ブートストラップ-VUEで私の最初のステップである、とのように私は、動的属性の名前を変更する方法を把握しようとしています小さな画面解像度でツールチップの位置が変わります。以下

JSコードが正常に動作しますが、ツールチップが彼の位置を変更しない=（ は私が私のミスを改善してください。

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

ブラウザ - クロム

ブラウザのコンソール - クローム

Answer 1

編集：私の昔の答えは、それがv-b-tooltipはコンポーネントではなくディレクティブであったと想定。

私が知る限り、指示文で変数を使用することはサポートされていません。 1つの解決策は、そのオプションを動的に更新できるので、vue-popperを使用することです。ブートストラップではツールチップのためにポッドを使用しているため、このように新しいテクノロジを導入することはありません。