Есть ли способ динамически вставлять события кликов в Vue.js? - PullRequest
Новая
       16

Есть ли способ динамически вставлять события кликов в Vue.js?

0 голосов
/ 04 июня 2018

Попытка добиться вставки некоторых вычисленных методов в элемент, зависящий только от мобильных окон просмотра.Вот основная суть того, с чем я работаю: 

<a class="nav-link float-left p-x-y-16" v-bind:class={active:isCurrentTopicId(t.id)} @click="onTopicClicked($event, m, t)" href="#">{{t.title}}</a>

<script>

export default {
    data() {
        return {
            isClosed: false
        }
    },
    computed: {
        toggleMenu() {
            return {
                isClosed: this.isClosed
            }
        }
    },
    watch: {
        browserWidth(prevWidth, newWidth) {
            console.log('width changed from ' + newWidth + ' to ' + prevWidth);
    },
    mounted() {
        var that = this;
        this.$nextTick(function() {
            window.addEventListener('resize', function(e) {
                that.browserWidth = window.innerWidth;
                if(that.browserWidth > 824) {
                    console.log('Desktop View');
                } else {
                    console.log('Mobile View');
                }
            })
        })
    }
}
</script>

Я хотел бы попытаться использовать событие resize для определения ширины браузера, чтобы я мог динамически вставлять вычисляемую функцию в этот тег <a>

Ответы [ 2 ]

0 голосов
/ 05 июня 2018

Вы можете либо предоставить два разных элемента (один для настольного компьютера, а другой для мобильного), как указано Картикеяном, или условно добавить событие щелчка к этому элементу: 

v-on="isMobileView ? { mouseover: onTopicClicked($event, m, t) } : {}"
0 голосов
/ 05 июня 2018

Вы можете добавить данные, которые говорят, является ли представление мобильным или нет, и использовать v-if, v-else и добавить @click только к v-if = "isMobileView" 

<a v-if="isMobileView" class="nav-link float-left p-x-y-16" v-bind:class={active:isCurrentTopicId(t.id)} @click="onTopicClicked($event, m, t)" href="#">{{t.title}}</a>

<a v-else class="nav-link float-left p-x-y-16" v-bind:class={active:isCurrentTopicId(t.id)} href="#">{{t.title}}</a>

<script>

export default {
    data() {
        return {
            isClosed: false,
            isMobileView: false
        }
    },
    computed: {
        toggleMenu() {
            return {
                isClosed: this.isClosed
            }
        }
    },
    watch: {
        browserWidth(prevWidth, newWidth) {
            console.log('width changed from ' + newWidth + ' to ' + prevWidth);
    },
    mounted() {
        var that = this;
        function checkIfMobileView() {
            that.isMobileView = window.innerWidth <= 824;
        }
        this.$nextTick(function() {
            window.addEventListener('resize', checkIfMobileView);
        });
        checkIfMobileView();
    }
}
</script>
...