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和元素（不打算）

回答

相關問題