Question

使用v-if显示组件时出现问题。在一个组件中，我有<div v-if="seen">...</div>。在另一个组件中，我有<button v-on:click="seen = !seen">...</button>。在“ var vue = nev Vue（{...}）”文件的数据中：我已经看到：true，这是行不通的。

我找到了有效的“解决方案”：example 并且我在代码中尝试了此数据的“功能版本”，但也无法正常工作：/

这是我的代码：主文件

var vue = new Vue({
    el: '#app',
    components: {
        Navigation,
        Home,
        Footer,
        Login
    },
    data: function () {
        return {
        seen: true
        }
    },


    template: "<div><navigation></navigation><login></login><home></home><Footer></Footer></div>"

})

我看不到的模板

<div v-if="seen" id="loginbox">
        <form>
            <input type="text" placeholder="login" class="input is-rounded"/>
            <input type="password" placeholder="password" class="input is-rounded"/>
        </form>
    </div>

按钮模板

 <div class="navbar-menu">
                    <div class="navbar-start"></div>
                    <div class="navbar-end">
                                <p class="nav-item">
                                    <a class="nav-link" v-on:click="seen = !seen">Login</a>
                                </p>
                                <p class="nav-item">
                                    <a class="nav-link">Register</a>
                                </p>
                    </div>  
                </div>

我希望当我单击按钮时，将显示“ loginbox”模板。

编辑：我做到了一半。我在看不见的模板中使用了道具（使用导出默认值...）。它无法正常工作，因为现在我只能使用此模板中的按钮来更改“已看到”的值。我想通过另一个模板中的按钮来更改它的值。

Answer 1

您应该以某种方式在组件之间共享数据。您可以通过多种方式进行操作，但是对于这种情况，我建议使用事件处理https://vuejs.org/v2/guide/events.html#ad

使用示例-https://codesandbox.io/s/mzq0r2w88j

编辑了沙箱

无论数据中的值如何，都看不到带有v-if的div

1 个答案: