I am encountering an issue with vue.js2. After submitting a form, I need to refresh the image src. When the form is submitted, a new image containing a chart is generated in the backend. The new chart image replaces the old one, but the URL remains the same. To update the image, I am using v-bind on the image src and binding it to one of the data variables. The initial image displayed before form submission is placeholder.jpg. Upon receiving a response, I call the changeChart method to update it with graph.jpg. This action successfully updates the image.
The problem arises when I modify a value and click submit again, the image does not change. However, if I first click the clear method and set chart_url back to placeholder.jpg before the next submit, the image changes correctly.
<v-img
v-bind:src=this.chart_url
</v-img>
<script>
export default {
name: "CenterComponent",
data: function () {
return {
value1: "",
value2: "",
value3: "",
output: null,
chart_url: "http://127.0.0.1:5000/media/pictures/placeholder.jpg",
}
},
methods:{
clear(){
this.value1 = "";
this.value2 = "";
this.value3 = "";
this.output = "";
this.chart_url = "http://127.0.0.1:5000/media/pictures/placeholder.jpg";
},
changeChart(){
this.chart_url = "http://127.0.0.1:5000/media/pictures/graph.jpg"
},
submitForm(){
fetch("http://127.0.0.1:5000/predict",{
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({
value1: this.value1,
value2: this.value2,
value3: this.value3
})
}
).then(response => {
if (response.ok) {
return response.json();
}
}).then(data => {
this.output = data["prediction"];
this.changeChart();
});
}
},
};
</script>