Vue的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是一個組件，而不是一個指令。

從我可以告訴，不支持在指令中使用變量。一種解決方案是使用vue-popper，因爲您可以動態更新其選項。 Bootstrap使用Popper作爲其工具提示，因此您不會以這種方式引入新技術。