When I click the button, I want to show the HTML Element. The click method is changing the value of "showCreateSection", but the HTML is not showing.

I already tried different versions with and without "this" (this.showCreateSection).

Do I have to bind the variable somehow?

var CreateSectionContainer = new Vue({
    el: '#create-section-container',
    data:  {      
            showCreateSection: false
    },
    methods: {
        showCreateSectionInput: function (event) {
            console.log("showCreateSectionInput");
            console.log(this);
            this.showCreateSection = true;
        }
    }
});

<div id="create-section-container">
    <div id="task-editor" class="container tab-pane active">
        <div class="container">
            <div class="row">
                <div id="new-section-container" v-show="this.showCreateSection" class="col-md-8">
                    <h6>Section Name</h6>
                    <input type="text" id="sectionName" class="w-100 form-control" name="Name" placeholder="Name">

                </div>

                <div class="row">
                    <button type="button" v-on:click="showCreateSectionInput" class="btn btn-success"><i class="fas fa-plus-circle"></i> Add new section</button>
                    <br />
                    <hr>
                </div>
            </div>
        </div>
        <br />
        <div class="row">
            <div class="nav__list w-100" id="assignment-section-container1">
                <section-item v-for="item in sectionList" v-bind:section="item" v-bind:key="item.id">
                </section-item>
            </div>
        </div>
    </div>
</div>

When I click the button, I want to show the HTML Element. The click method is changing the value of "showCreateSection", but the HTML is not showing.

I already tried different versions with and without "this" (this.showCreateSection).

Do I have to bind the variable somehow?

var CreateSectionContainer = new Vue({
    el: '#create-section-container',
    data:  {      
            showCreateSection: false
    },
    methods: {
        showCreateSectionInput: function (event) {
            console.log("showCreateSectionInput");
            console.log(this);
            this.showCreateSection = true;
        }
    }
});

<div id="create-section-container">
    <div id="task-editor" class="container tab-pane active">
        <div class="container">
            <div class="row">
                <div id="new-section-container" v-show="this.showCreateSection" class="col-md-8">
                    <h6>Section Name</h6>
                    <input type="text" id="sectionName" class="w-100 form-control" name="Name" placeholder="Name">

                </div>

                <div class="row">
                    <button type="button" v-on:click="showCreateSectionInput" class="btn btn-success"><i class="fas fa-plus-circle"></i> Add new section</button>
                    <br />
                    <hr>
                </div>
            </div>
        </div>
        <br />
        <div class="row">
            <div class="nav__list w-100" id="assignment-section-container1">
                <section-item v-for="item in sectionList" v-bind:section="item" v-bind:key="item.id">
                </section-item>
            </div>
        </div>
    </div>
</div>

• javascript
• html
• vue.js

• Have you used the vue dev tools to inspect the value as you executing the function? That way you can make sure your function actually is executing. – DrCord Commented Jul 16, 2019 at 18:24
• I think you might need to change v-on:click="showCreateSectionInput" to v-on:click="showCreateSectionInput()" and in the function definition remove the event input parameter – DrCord Commented Jul 16, 2019 at 18:28

2 Answers 2

Ok sorry guys for wasting your time... I spent to many hours in front of the PC therefore I missed the obvious...

I added "display none" to the "new-section-container". I used to do this because I am refactoring from jQuery to Vue. Because of jQuery I had to set the style at first and I did this in the css file...

You should use puted for that:

var CreateSectionContainer = new Vue({
    el: '#create-section-container',
    data: function() {
        return {
            showCreateSection: false
        }      
    },
    methods: {
        showCreateSectionInput: function (event) {
            console.log("showCreateSectionInput");
            console.log(this);
            this.showCreateSection = true;
        },
        puted: {
            showSection() {
                return this.showCreateSection;
            }
        }
    }
});

and in your html file:

<div id="new-section-container" v-show="showSection" class="col-md-8">
  <h6>Section Name</h6>
  <input type="text" id="sectionName" class="w-100 form-control" name="Name" placeholder="Name">
</div>