Vue.js结合是躲在父母的div和元素（不打算）

我建立一个简单的页面Vue.js和我的HTML代码片段如下：Vue.js结合是躲在父母的div和元素（不打算）

<div id="vueApp"> 
     <a href="#" class="button is-outlined" @click="showNextDiv" >Show Div</a> 
     <div class="modal animated fadeIn" v-bind:class="{ is-active: isActive }"> 

    ... 

    </div> 
</div>

我使用的是布尔玛CSS框架和“is-active”修饰符使div活跃（顾名思义）。

我的问题是，无论何时我加载页面<div id="vueApp">不显示也不会使得isActive的按钮变为真。

这是我的VUE实例声明：

new Vue({ 
    el: '#vueApp', 
    data: { 
    isActive: false 
    }, 
    methods: { 
    showNextDiv: function(){ 
     this.isActive = true; 
    } 
    } 
});

来源

2017-02-10 fmlopes

在你的CSS结合的连字符，使名无效的JavaScript属性的名称，所以你需要放在引号：

v-bind:class="{ 'is-active': isActive }"

我怀疑你的控制台中可能有某些内容突出显示此错误。

UPDATE

应包括我的jsfiddle显示，如果is-active被包裹在引号的JS和HTML代码的工作：

https://jsfiddle.net/psteele/mzjb8wvb/

来源

2017-02-10 18:10:57 PatrickSteele

谢谢您的回复帕特里克。我已经这样做了，但无济于事，实际上我以为我用引号复制了它。无论哪种方式，它不应该隐藏父div。 – fmlopes

与工作jsFiddle更新。如果它不适合您，那么您在此问题中包含的示例代码之外必定存在导致此问题的某些内容。你的控制台有任何错误吗？ – PatrickSteele

我明白这是如何工作的，以及它为什么起作用。然而，我遇到了一些麻烦，因为无论何时将此片段'v-bind：class =“{'is-active'：isActive}”'插入到“模式”div中，“vueApp”和锚都消失。因此我甚至无法按下按钮。预先感谢您的耐心等待。 – fmlopes

Vue.js结合是躲在父母的div和元素（不打算）

回答

相关问题