lawrenceching-vuejs-v-if

Vue v-if does not work if property is not defined initially

by Lawrence Ching

HTML

<div id="app">
  <h1>Demo for why v-if is Broken</h1>

  <div class="section">
    <h2>{{ section1.title }}</h2>
    <p>
      {{section1.content}}
    </p>
    <button @click="changeSection1">
    Change Content
    </button>
  </div>

  <div class="section">
    <h2>{{ section2.title }}</h2>
    <p>
      {{section2.content}}
    </p>
    <button @click="changeSection2">
      Change Content
    </button>
  </div>

</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

h1 {
  font-weight: bold;
  margin-bottom: 20px;
}

h2 {
  font-weight: bold;
}

.section {
  margin: 10px 0 10px 0;
}

Vue

new Vue({
  el: "#app",
  data: {
    section1: {
    	title: 'v-if works',
      content: 'This section demostrates a normal case of v-if'
    },
    section2: {
    	title: "v-if doesn't work",
      // I didn't define content properity initially
    }
  },
  methods: {
  	changeSection1: function(){
			this.section1.content = 'Section 1 content has been changed!'
    },
    changeSection2: function(){
			this.section2.content = 'Section 2 content has been changed!'
    }
  },
  created () {
  	this.section2.content = 'This section demostrates a ABNORMAL case of v-if'
  }
})