javascript - 更改值时 Vue v-show 不呈现

Question

当我点击按钮时，我想显示 HTML 元素。单击方法正在更改“showCreateSection”的值，但 HTML 未显示。

我已经尝试过带有和不带有“this”的不同版本 (this.showCreateSection)。

我必须以某种方式绑定(bind)变量吗？

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>

Answer 1

好的，对不起，浪费你们的时间……我在电脑前花了很多时间，所以我错过了显而易见的……

我在“new-section-container”中添加了“display none”。我以前这样做是因为我正在从 jQuery 重构到 Vue。由于 jQuery，我必须先设置样式，然后在 css 文件中进行设置...