Question

当我单击按钮时，我想显示HTML元素。 click方法更改了“ showCreateSection”的值，但是HTML并未显示。

我已经尝试了带有和不带有“ this”（this.showCreateSection）的不同版本。

我是否必须以某种方式绑定变量？

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

您应该为此使用

namespace po=boost::program_options;

在您的html中

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;
        },computed:{
showSection(){
return  this.showCreateSection;
}
}
    }
});

Answer 2

对不起，浪费您的时间...我在PC上呆了多个小时，所以我错过了明显的机会...

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

值更改时Vue v-show不呈现

2 个答案: