vue.js - Vue 2 + Bootstrap-vue - 动态属性

Question

这是我在 Vue 2 + bootstrap-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);
        }
    });
});

浏览器 - Chrome

浏览器控制台 - Chrome

Answer 1

编辑:我的旧答案假定 v-b-tooltip 是组件而不是指令。

据我所知，不支持在指令中使用变量。一种解决方案是使用 vue-popper因为您可以动态更新其选项。 Bootstrap 在其工具提示中使用 Popper，因此您不会以这种方式引入新技术。