I've encountered an issue that I'm having trouble articulating, but I'll do my best to explain.
Upon loading the page, the following code snippet, which uses jinja-based placeholders, is executed:
<div class="ui container">
<div class="ui tiny blue header">{{ i.ProductName }}</div>
<h5 class="ui grey header">{{ i.Category }}</h5>
<h5 class="ui red header">₹{{ i.ActualPrice }} <s>₹{{ i.StrikedPrice }}</s> </h5>
<script type="text/javascript">var lastid = "{{lid}}"</script>
</div>
The above code renders correctly, and I can retrieve the lastid as expected and set it as a global variable.
However, when the user clicks on "Load More," it triggers a Vue.js function like so:
<button v-on:click="loadmore" class="fluid ui button">Load More</button>
This event then calls a Vue.js function:
<script>
var app5 = new Vue({
el: '#app-5',
delimiters: ['[[',']]'],
data: {
message: [],
},
methods: {
loadmore: function () {
axios.get('http://127.0.0.1:5000/api/products/'+ld)
.then(response => {this.message.push(...response.data);});
}
}
});
</script>
The Vue.js function pushes the data into a designated UI container as displayed below:
<div class="ui container">
<div class="ui tiny blue header"> [[i.ProductName]]</div>
<h5 class="ui grey header">[[i.Category]]</h5>
<h5 class="ui red header">₹[[i.ActualPrice]] <s>₹[[i.StrikedPrice]]</s> </h5>
<script type="text/javascript">lastid = [[lid]]</script>
</div>
In this code snippet, there's a JavaScript tag where the value of lastid is not updating the global variable as intended. The lastid should be updated with the latest ID. Is there a solution to address this issue or any recommendations to change the current logic?