VueJS: Computed with undefined data

by RomainMazB

HTML

<html>
  <body>
    <div id="app">
      <button @click="turnToTrue()">Turn is_displayed to TRUE</button><br>
      <ul ref="fakeConsole">
        <li>this.is_displayed = {{ is_displayed }}</li>
        <li>is_displayed_computed returns {{ is_displayed_computed }}</li><br>
      </ul>
    </div>
  </body>
</html>

JavaScript

const App = new Vue({
	el: '#app',
  data: {
  },
  methods: {
  	turnToTrue() {
    	this.is_displayed = true;
      this.$refs.fakeConsole.innerHTML += '<li>this.is_displayed = '+this.is_displayed+'</li>';
      this.$refs.fakeConsole.innerHTML += '<li>is_displayed_computed returns '+this.is_displayed_computed+'</li><br>';
    }
  },
  computed: {
    is_displayed_computed() {
      return (typeof this.is_displayed !== 'undefined' && this.is_displayed) ? 'TRUE' : 'FALSE';
    }
  },
  beforeCreate() {
  	this.is_displayed = false;
  }
});