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作为其工具提示，因此您不会以这种方式引入新技术。