Just starting out with Vue and Laravel!
Currently, I am retrieving data from an API Resource in Laravel.
The API consists of 2 fields:
Goal
Value
Here is the code snippet:
<template>
<div class="container">
<h1> Progress </h1>
<div class= "progress" v-for = "progressdata in progress" v-bind:id="progressdata.id">
<div>{{ progressdata.goal }}</div>
<div id="div2">{{ progressdata.value }}</div>
</div>
</div>
</template>
<script>
export default {
data: function() {
return {
progress: [],
}
},
mounted() {
this.loadContents();
this.listen();
},
methods: {
loadContents: function() {
//load Api
axios.get('/api/progress')
.then((response) => {
this.progress = response.data.data;
})
.catch(function (error) {
console.log(error);
});
},
listen(){
Echo.channel('progress')
.listen('UpdatedValue', (e) =>{
var target = e.target;
console.log(target);
var value = e.value;
console.log(value);
var div1 = document.getElementById(target);
console.log(div1);
div1.innerHTML = value;
//console.log(e);
});
}
}
}
</script>
Output :
54974 -- Goal
6543 --value(Updated through tinker)
2 --Goal
1 --Value
463 --Goal
52 --Value
Encountering a challenge when triggering the event using Tinker:
event(new UpdatedValue('div2', 6543));
I have managed to update the value within the specific DIV with ID div2.
However, I need assistance in updating the entire array of Values in the v-for loop within the template when triggering events using Tinker.
Unsure about the next steps...Any help would be greatly appreciated!
Thank you.