Условный шаблон рендеринга на Vue? - PullRequest
0 голосов
/ 10 октября 2018

У меня есть простая ситуация, когда я хочу отобразить значок корзины на основе значения ширины окна, но он всегда показывает последний, даже если windowWidth действительно меняет значение.Посоветуйте пожалуйста что делать!

    <template v-if="windowWidth>=1024">
                        <div class="nav-user-account"> {{windowWidth}}      
                            <div class="nav-cart nav-cart-box">                                
                                <a href="/cart" rel="nofollow"><span class="text hidden-sm">Cart</span></a>
                                <span class="cart-number" id="nav-cart-num">{{cartItemCount}}</span>
                            </div>
                        </div>
                    </template>
    <template v-if="windowWidth<1024">
                        <a href="#" style="color:#ff6a00" class="icon-cart">
{{windowWidth}} 
                            <i class="fa fa-shopping-cart fa-2x" aria-hidden="true"></i>
                            <span class="cart-num">2</span>
                        </a>
                    </template>
                    <script>
                        import { mapGetters } from 'vuex'
                        export default {
                            data() {
                                return {
                                    windowWidth: window.innerWidth,

                                }
                            },
                            computed: {
                                ...mapGetters('cart', {
                                    cartItemCount: 'getShoppingCartItemsCount'
                                })
                            },

                            mounted() {
                                this.$nextTick(() => {
                                    window.addEventListener('resize', () => {
                                        this.windowWidth= window.innerWidth
                                    });
                                })
                            },
                        }
                    </script>

ОБНОВЛЕНО: как указал Tony19, мне нужен мастер-шаблон вне этих двух шаблонов.

<template>
    <div>
<template v-if="windowWidth>=1024">...</template>
<template v-else></template>
</div>
</template>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...