Laravel Vue js Response Result not updating after axios call - laravel

Question

I have vue component.After axios response counter not updating on popup. showInterest function is called on created method.
<template>
<span class="interested-button">
<a data-toggle="modal" data-target="#buyModel" #click="showInterest(idea_id, owner_id)">
<i class="fa fa-usd" aria-hidden="true"></i> Interested to buy?
</a>
<div
class="modal fade"
id="buyModel"
tabindex="-1"
role="dialog"
aria-labelledby="buyModelLabel"
aria-hidden="true"
>
<div class="modal-dialog" role="ideabuy">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="buyModelLabel">How much you are willing to spend?</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
{{ sharedPriceCount }}
<template v-if="sharedPriceCount == 0">
<form #submit.prevent="saveIdeaPrice">
<div class="modal-body">
<div class="form-group">
<input type="text" v-model="price" class="form-control">
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-success">Save</button>
</div>
</form>
</template>
<template v-else>
<div class="modal-body">
<div class="form-group">You have already shown interest for this Idea.</div>
</div>
</template>
</div>
</div>
</div>
</span>
</template>
<script>
import mixins from "../mixins";
export default {
name: "buyProduct",
mixins: [mixins],
props: ["input_name", "idea_id", "owner_id"],
data() {
return {
result: [],
loading: false,
price: 0,
sharedPriceCount: 0
};
},
created() {},
mounted() {},
methods: {
saveIdeaPrice() {
axios
.post("/idea-buy-price", {
id: this.idea_id,
owner: this.owner_id,
price: this.price
})
.then(res => {
this.loading = false;
})
.catch(res => (this.loading = false));
},
showInterest(idea_id, owner_id) {
let _self = this;
axios
.get("/idea-buy-price/" + idea_id + "/" + owner_id)
.then(
function(response) {
_self.result = JSON.stringify(response.data.data);
_self.sharedPriceCount = response.data.data.length;
console.log(_self.sharedPriceCount);
_self.loading = false;
}.bind(_self)
)
.catch(
function(error) {
_self.loading = false;
}.bind(_self)
);
},
updateCall() {}
}
};
</script>
I am getting Array data through api call.but on popup its not working properly.I want to update this.sharedPriceCount when popup open.to show the popup content.without refreshing page.
Anyone can help me on this?

Answer 1

If result and loading are updated then please disregard following:
I had trouble with this. within function in axios call.
Solved it by defining
var _self = this;
before axios call and using _self within response function