Update VueJS Component with Data Load

Testing computed properties.

by BaronGrivet

HTML

<div id="app">
<external-data code="foo">foo</external-data>
<external-data code="bar">bar</external-data>
<external-data code="oof">oof</external-data>
<external-data code="rab">rab</external-data>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
}

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

Vue

Vue.component('external-data', {
  props: {
    code: {
      type: String,
      required: true
    }
  },
	template: '<div :data-code="code">{{ content }}</div>',
	computed: { 
  	content() {
  		var externalData = this.$parent.externalData;
      var output = 'initiating...'
      console.log(externalData)
      console.log(this.code)
      	if (externalData) {
       		var output = 'no content'
         	var result = externalData.find(o => o.code === this.code)
         	if(result){
         		output = result.content
         	}         
       }
       console.log(output)
       return output
  	}
  }
});

new Vue({
  el: "#app",
  data: {
    externalData: [
      {code:'foo', content: 'Foo has content'},
      {code:'bar', content: 'Bar has content'},
      {code:'rab', content: 'Rab has content'},      
      ]
  },
  created: function() {

// Wait 5 seconds, then load data
    this.timer = setInterval(function(){
    	this.externalData = {
      0:{code:'foo', content: 'Foo has content'},
      1:{code:'bar', content: 'Bar has content'},
      2:{code:'rab', content: 'Rab has content'},      
      }
      console.log('Data Loaded')
    }, 5000)

	}
})