I use Vue framework and i have a .vue file in which i want to get the current Country on created(). My code is below:
<template>
<div id="show-blogs">
<h1>All Blog Articles</h1>
<input type="text" v-model="search" placeholder="search blogs" />
<!-- INPUT -->
<input type="text" v-model="message" required id="selectedCountry"/>
<!-- BUTTON ADD BLOG -->
<button v-on:click="selectCountry">Select country</button>
<div v-for="blog in filteredBlogs" class="single-blog">
<!-- router-link = href -->
<router-link v-bind:to="'/blog/' + blog.id">
<h2>{{ blog.country }}</h2>
</router-link>
<p>{{ blog.city }}</p>
<p>{{ blog.category }}</p>
<p>{{ blog.phoneNumber }}</p>
</div>
</div>
</template>
<script>
var currentCountry = getCurrentCountry();
import searchMixin from '../mixins/searchMixin';
export default {
data() {
return {
blogs: [],
search: '',
}
},
methods: {
selectCountry: function() {
selectedCountry = document.getElementById("selectedCountry").value;
this.$http.get('https://aggelies-7fde2.firebaseio.com/posts/' + selectedCountry + '.json').then(function(data) {
return data.json()
}).then(function(data) {
var blogsArray = [];
for (let key in data) {
data[key].id = key;
blogsArray.push(data[key]);
}
this.blogs = blogsArray;
});
},
getCurrentCountry: function() {
var currCountry;
var requestUrl = "http://ip-api.com/json";
$.ajax({
url: requestUrl,
type: 'GET',
async: false,
success: function(json) {
currCountry = json.country.toUpperCase();
},
error: function(err) {
}
});
alert(currCountry);
return currCountry;
}
},
created() {
this.$http.get('https://aggelies-7fde2.firebaseio.com/posts/' + currentCountry + '.json').then(function(data) {
return data.json()
}).then(function(data) {
var blogsArray = [];
for (let key in data) {
data[key].id = key;
blogsArray.push(data[key]);
}
this.blogs = blogsArray;
//console.log(this.blogs);
});
},
mixins: [searchMixin]
}
</script>
<style scoped>
.....
</style>
the ajax code is working fine and i get current country. But when i call in the beginning of the script getCurrentCountry(), the function does not work and i dont get the return value so as to assign it to currentCountry. Any suggestions what is wrong?
