@roevevgen
junior php разработчик

Кнопки сверху и снизу должны дублироваться а не каждая открывать своё меню VUE.js?

Не подскажите как так сделать Должен быть только один экземпляр меню id=mySidebar и никаких mySidebar2 на vue,js кнопки сверху и снизу должны дублироваться а не каждая открывать своё меню

меню должно лежать в хидере, в футере только кнопка

которая открывает или закрывает меню или карзинку
main.js
var vm = new Vue({
    el: '#app',
    data:
      {
        shop:'Your cart is emptyTime to start shopping!',
        links1: 'Catalog',
        links2: 'Catalog',
        links3: 'Catalog',
        links4: 'Catalog',
        links5: 'Catalog',
        links6: 'Catalog',
        isActive: false,
        isActivatus: false,

    },
methods: {
    activate() {
        this.isActive = !this.isActive;
        if (this.isActive) {
            document.getElementById("mySidebar").style.width = "320px";
            document.getElementById("main").style.marginLeft = "1px";
        } else {
            document.getElementById("mySidebar").style.width = "0px";
            document.getElementById("main").style.marginLeft = "0px";
        }

    },
    activates() {
        this.isActivatus = !this.isActivatus;
        if (this.isActivatus) {
            document.getElementById("myShopings").style.width = "320px";
            document.getElementById("main__shoop").style.marginLeft = "1px";
        } else {
            document.getElementById("myShopings").style.width = "0px";
            document.getElementById("main__shoop").style.marginLeft = "0px";
        }

    }
  }


 });
var vm = new Vue({
el: '#app2',
data: {
    shop:'Your cart is emptyTime to start shopping!',
    links1: 'Catalog',
    links2: 'Catalog',
    links3: 'Catalog',
    links4: 'Catalog',
    links5: 'Catalog',
    links6: 'Catalog',
    isActive: false,
    isActivatus: false,
},
methods: {
    activate() {
        this.isActive = !this.isActive;
        if (this.isActive) {
            document.getElementById("mySidebar2").style.width = "320px";
            document.getElementById("main2").style.marginLeft = "1px";
        } else {
            document.getElementById("mySidebar2").style.width = "0px";
            document.getElementById("main2").style.marginLeft = "0px";
        }

    },
    activates() {
        this.isActivatus = !this.isActivatus;
        if (this.isActivatus) {
            document.getElementById("myShopings2").style.width = "320px";
            document.getElementById("main__shoop2").style.marginLeft = "1px";
        } else {
            document.getElementById("myShopings2").style.width = "0px";
            document.getElementById("main__shoop2").style.marginLeft = "0px";
        }

    }
  }

 });


index.html
<div id="app2">
                <div @click="activate" id="mySidebar2" class="sidebar__2">
                    <a href="#">{{links1}}</a>
                    <a href="#">{{links2}}</a>
                    <a href="#">{{links3}}</a>
                    <a href="#">{{links4}}</a>
                    <a href="#">{{links5}}</a>
                    <a href="#">{{links6}}</a>
                </div>
                <div id="main2">
                    <div @click="activate" target="nav-collapse" class="hamburgerButton">
                        <div v-bind:class="{active: isActive}" class="hamburger__1 bar1__1"></div>
                        <div v-bind:class="{active: isActive}" class="hamburger__1 bar2__2"></div>
                        <div v-bind:class="{active: isActive}" class="hamburger__1 bar3__3"></div>
                    </div>
                </div>
                <div @click="activates" id="myShopings2" class="shoopers__2">
                    <p>{{shop}}</p>
                </div>
                <div id="main__shoop2">
                    <div @click="activates" target="nav-collapse" class="logos__shopping herth__2">
                        <div v-bind:class="{active: isActive}" class="scoping ">
                            <img src="img/shoping2.svg" alt="shoping">
                        </div>
                        <div id="zindex__1"><p>0</p></div>
                    </div>
                </div>
            </div>
        </div>
 <div id="app">
                <div @click="activate" id="mySidebar" class="sidebar">
                    <a href="#">{{links1}}</a>
                    <a href="#">{{links2}}</a>
                    <a href="#">{{links3}}</a>
                    <a href="#">{{links4}}</a>
                    <a href="#">{{links5}}</a>
                    <a href="#">{{links6}}</a>

                </div>
                <div id="main">
                    <div @click="activate" target="nav-collapse" class="hamburgerButton">
                        <div v-bind:class="{active: isActive}" class="hamburger bar1"></div>
                        <div v-bind:class="{active: isActive}" class="hamburger bar2"></div>
                        <div v-bind:class="{active: isActive}" class="hamburger bar3"></div>
                    </div>
                </div>
                <div @click="activates" id="myShopings" class="shoopers">

                    <p>{{shop}}</p>

                </div>
                <div id="main__shoop">
                    <div @click="activates" target="nav-collapse" class="logos__shopping herth">
                        <div v-bind:class="{active: isActive}" class="scoping ">
                            <img src="img/shoping.svg" alt="shoping">
                        </div>
                        <div id="zindex"><p>0</p></div>
                    </div>
                </div>
            </div>


  • Вопрос задан
  • 61 просмотр
Пригласить эксперта
Ответы на вопрос 1
Fragster
@Fragster
помогло? отметь решением!
Во первых - нужно избавиться от document.getElementById("main__shoop") в пользу вычисляемых стилей или классов в соответствующих местах (в том компоненте, в котором эти элементы находятся).
Во вторых: если очень хочется использовать несколько экземпляров vuejs, то нужно сделать им общее хранилище, например простой контейтер или хранилище vuex. И тогда по кнопке менять данные в этом общем хранилище. Эти данные потянут за собой изменение вычисляемого стиля и документ придет в нужное состояние.

Ну а вообще зачем тут два экземпляра vue не очень понятно. Если хочется делить на части, но не хочется использовать однофайловые компоненты, то можно воспользоваться x-templates: https://ru.vuejs.org/v2/guide/components-edge-case...
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы