Vue 2 + Bootstrap-vue - dynamic attribute

Question

this is my first steps in Vue 2 + bootstrap-vue, and I'm trying to figure out how to dynamically change the name of an attribute, so that at a small screen resolution the tooltip changes its position.

JS code below works fine, but tooltip not changing his position =( Please help me improve my mistake;

.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);
        }
    });
});

Browser - Chrome

Browser console - Chrome

Franey · Accepted Answer · 2017-09-16 19:31:45Z

1

Edit: my old answer assumed that was a v-b-tooltip was a component and not a directive.

From what I can tell, using a variable in a directive isn't supported. One solution would be to use vue-popper since you can update its options dynamically. Bootstrap uses Popper under the hood for its tooltips, so you wouldn't be introducing new technologies this way.

edited Sep 16, 2017 at 19:31

answered Sep 16, 2017 at 18:46

Franey

4,3762 gold badges19 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Bert Over a year ago

v-b-tooltip is a directive, not a component. OP is trying to add a dynamic modifier to a directive.

NiKO · Accepted Answer · 2018-11-15 07:48:12Z

1

For Bootstrap-Vue tooltip there is parameter placement, so code could look like this:

<b-btn title="Title" target="d150" :placement="position">My btn</b-btn>

More at: https://bootstrap-vue.js.org/docs/components/tooltip

answered Nov 15, 2018 at 7:48

NiKO

2,9231 gold badge22 silver badges20 bronze badges

Collectives™ on Stack Overflow

Vue 2 + Bootstrap-vue - dynamic attribute

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related