Currently, I have an API call being made in the create hook of my Vue root. After that call, a component is attempting to utilize the data returned from the API.
My inquiry is straightforward. Is it possible to have
<stage-execs></stage-execs><stage-execs></stage-execs> <div id="vue-job">
<div class="column">
<div class="row">
<stage-execs v-bind:job_execs=job_execs></stage-execs>
<br><br>
</div>
</div>
<script>
Vue.component('stage-execs', {
delimiters: [ '[[', ']]' ],
props: ['job_execs'],
template: `
<ul id="example-1">
<h3>Stages</h3>
<li v-for="item in this.job_execs">
[[ item.build_id ]]
</li>
</ul>
`,
var v_root = new Vue({
delimiters: [ '[[', ']]' ],
el: '#vue-job',
data: {
job_execs: []
},
created() {
url="http://{{ api_endpoint }}"
fetch(url)
.then(response => response.json())
.then(body => {
for(i=0; i<body.length; i++){
this.job_execs.push({
'build_id': JSON.stringify(body[i].build_id),
'status': JSON.stringify(body[i].status.name),
})
}
})
.catch( err => {
console.log('Error Fetching:', url, err);
return { 'failure': url, 'reason': err };
});
},
});