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

Answer 2

对于 Bootstrap-Vue 工具提示，其参数为 placement ，因此代码可能如下所示：

T h i s i s a l i n e o f c o d e

更多信息：https://bootstrap-vue.js.org/docs/components/tooltip

Vue 2 + Bootstrap-vue - 动态属性

2 个答案: