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: {
  	is_fully_loaded: false
  },
  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() {
    	if (this.is_fully_loaded === false) return 'this.is_fully_loaded = '+ this.is_fully_loaded;
      return (this.is_displayed) ? 'TRUE' : 'FALSE';
    }
  },
  beforeCreated() {
  	this.is_displayed = false;
    console.log('this.is_displayed set to '+this.is_displayed);
     console.log('this.is_fully_loaded equals '+this.is_fully_loaded);
  },
  mounted() {
  	this.is_fully_loaded = true;
     console.log('this.is_fully_loaded set to '+this.is_fully_loaded);
  }
});