Vue.js binding is hiding parent divs and elements (not intended)

Question

I'm building a simple Vue.js page and my HTML snippet is as follows:

<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>

I'm using the Bulma CSS Framework and the "is-active" modifier makes the div active (as the name suggests).

My problem is that whenever I load the page the <div id="vueApp"> does not show up neither does the button that makes isActive turn true.

This is my vue instance declaration:

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

PatrickSteele PatrickSteele · Accepted Answer · 2017-02-10T18:10:57

The dash character in your CSS binding makes the name an invalid javascript property name so you need to enclose it in quotes:

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

I suspect there might be something in your console highlighting this error.

UPDATE

Should have included my jsFiddle showing that your JS and HTML code works if the is-active is wrapped in quotes:

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

Vue.js binding is hiding parent divs and elements (not intended)

1 Answers