CODEWITHSUNDEEP
vue.jsvue-component
Nikodem Kabsch
Nikodem Kabsch

Reputation: 3

Don't see div with v-if, regardless of the value in the data

I have problem with displaying component with v-if. In one component i have <div v-if="seen">...</div>. In another component I have <button v-on:click="seen = !seen">...</button>. In "var vue = nev Vue({...})" file, in data: I have seen: true and this is not working.

I found "solution" which works: example and I tried this "function version" of data in my code, but it doesn't work too :/

Here is my code: Main File

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>"

})

template that I can't see

<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>

button template

 <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>

I expect that when I click on button, "loginbox" template will be shown.

EDIT: I did it in half way. I used props (used export default...) in in template that I cannot seen. It not work properly, becouse now I can change value of "seen" only with button which is in this template. I'd like change value of it by button which is in another template.

Upvotes: 0

Views: 1147

Answers (1)

Emīls Gulbis
Emīls Gulbis

Reputation: 2070

You should somehow share data between components. You can do it many ways, but for this case i suggest to use event handling https://v2.vuejs.org/v2/guide/events.html#ad

Edited your sandbox with example - https://codesandbox.io/s/mzq0r2w88j

Upvotes: 0

Related Questions