Question

我正在使用vuestrap-repo，现在我正在尝试实施＆＃39;旁边＆＃39; div滑入的地方。

当我将带有指令的按钮和旁边元素放在一个包含如下元素的元素中时，我得到了所有工作：

<div id="leftMenu">
    <button class="btn btn-success btn-lg" v-on="click:showLeft=true">OPEN MENU</button>

    <aside show="@{{@showLeft}}" placement="left" header="Title" width="350">
        CONTENT HERE
    </aside>
</div>

<script>
var aside = VueStrap.aside;
new Vue({
    el: '#leftMenu',
    components: {
        'aside': aside
    },
    data: {
        showLeft: false
    }
});
</script>

现在的问题是，由于叠加层的z-index问题，我需要将按钮放在我的导航栏中，而旁边需要放在正文中（而不是嵌套）。

当按钮位于具有其他ID的div中时，是否可以更改一个div中的show-value？

我尝试过课但没有成功。

el: '.leftMenu'

Answer 1

使用子组件无法完成您想要的任务。因为它期望它是DOM元素的孩子。

相反，我建议你创建两个Vue实例，让它们共享一个公共的全局数据var，当用户点击菜单按钮时，它会被修改。

<div id="nav">
    <button class="btn btn-success btn-lg" v-on="click:showLeft">OPEN MENU</button>
</div>
<div id="leftMenu">
    <aside show="@{{@showLeft}}" placement="left" header="Title" width="350">
        CONTENT HERE
    </aside>
</div>

<script>
var showLeftGlobal = false;

new Vue({
    el: '#leftMenu',
    data: {
        showLeft: showLeftGlobal
    }
});

new Vue({
    el: '#nav',
    data: {
        showLeft: showLeftGlobal
    },
    methods: {
        showLeft: function() {
            // Toggle show
            showLeftGlobal = showLeftGlobal ? false : true;
        }
    }
});
</script>

把按钮放在vue-element之外

1 个答案: