뷰 2 + 부트 스트랩-VUE - 동적 속성

Question

이 + 부트 스트랩-VUE 뷰 2 의 첫 단계이며, 나는 전혀 있도록 동적으로 속성의 이름을 변경하는 방법을 알아 내려고 노력하고있어 작은 화면 해상도는 툴팁의 위치를 ​​변경합니다.

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을 사용하는 것입니다. 부트 스트랩은 도구 설명을 위해 포퍼 (Popper)를 사용하므로 새로운 기술을 도입하지 않을 것입니다.