Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.
I set up an API with Laravel 10. The data comes fine with postman GET:http://localhost:8000/api/countries
{
"data": [
{
"id": 1,
"country_code": "AF",
"country_name": "Afghanistan",
"status": 1
},
{
"id": 2,
"country_code": "AL",
"country_name": "Albania",
"status": 1
},
in my script tag i'm getting the data in the console i see the array if data.
<script>
import { reactive, onMounted } from 'vue';
import axios from 'axios';
export default {
name: 'SignupPage',
setup() {
// Form data
const formData = reactive({
country: null,
});
// List of countries
const countries = reactive({ data: [] });
// Fetch countries from API
onMounted(() => {
axios.get('http://localhost:8000/api/countries')
.then(response => {
countries.value = response.data.data;
console.log('Countries:', countries.value);
})
.catch(error => {
console.error('Error fetching countries:', error);
});
});
// Method to submit form
const submitForm = () => {
// Logic to submit form data to API
console.log(formData.value);
};
return {
ageOptions,
countries,
};
},
};
</script>
everything seem to store it self in countries which i use in the Vue/ionic code
<ion-col size="12" class="ion-margin-bottom">
<ion-label>Country</ion-label>
<ion-select v-model="formData.country">
<ion-select-option v-for="country in countries.data"
:value="country.id" :key="country.id">
{{ country.country_name }}
</ion-select-option>
</ion-select>
</ion-col>
i have tried tons of different combinations and even Vue tag instead of Ionic but the dropdown remains empty.... what am i missing??
the other dropdowns work fine with local values like
<ion-col size="6" class="ion-margin-bottom">
<ion-label>Max Age</ion-label>
<ion-select v-model="formData.maxAge">
<ion-select-option v-for="age in ageOptions" :value="age" :key="age">
{{ age }}</ion-select-option>
</ion-select>
</ion-col>
// List of age options
const ageOptions = [];
for (let age = 18; age <= 100; age++) {
ageOptions.push(age);
}
In the v-for you're using countries.data but in your axios request you are already setting response.data.data as value for countries so maybe you should try to use countries in the v-for instead of countries.data
Like this
<ion-select-option v-for="country in countries" :value="country.id" :key="country.id">
@gych managed to fix it somehow. i missed some code apparently
<!-- Country -->
<ion-col size="12" class="ion-margin-bottom">
<ion-label>Country</ion-label>
<ion-select v-model="formData.country" @ionChange="onCountryChange">
<!-- Use firstCountry to display the first country -->
<ion-select-option v-if="firstCountry" :value="firstCountry.id">{{ firstCountry.country_name
}}</ion-select-option>
<!-- Show loading message if countries data is empty -->
<ion-select-option v-else>Loading...</ion-select-option>
<!-- Iterate through countries once available -->
<ion-select-option v-for="country in countries.data" :value="country.id"
:key="country.id">{{ country.country_name }}</ion-select-option>
</ion-select>
</ion-col>
<!-- City -->
<ion-col size="12" class="ion-margin-bottom">
<ion-label>City</ion-label>
<ion-input v-model="formData.city"></ion-input>
</ion-col>
<!-- Language -->
<ion-col size="12" class="ion-margin-bottom">
<ion-label>Language</ion-label>
<ion-select v-model="formData.language">
<!-- Populate languages from API -->
<ion-select-option v-for="language in languages" :value="language.id" :key="language.id">{{
language.name }}</ion-select-option>
</ion-select>
</ion-col>
<!-- Submit Button -->
<ion-col size="12" class="ion-margin-bottom">
<ion-button expand="full" @click="submitForm">Submit</ion-button>
</ion-col>
</ion-row>
</ion-list>
</ion-content>
</ion-page>
</template>
<script>
import { reactive, onMounted, computed } from 'vue';
import axios from 'axios';
export default {
name: 'SignupPage',
setup() {
// Form data
const formData = reactive({
name: '',
email: '',
password: '',
gender: '',
preference: '',
age: '',
profileimg: null,
country: '',
city: '',
lookingFor: '',
minAge: '',
maxAge: '',
language: '',
});
// List of years
const years = [];
for (let year = 1900; year <= 2006; year++) {
years.push(year);
}
// List of age options
const ageOptions = [];
for (let age = 18; age <= 100; age++) {
ageOptions.push(age);
}
const countries = reactive({ data: [] }); // Reactive object for countries
// Fetch countries from API on component mount
onMounted(() => {
axios.get('http://localhost:8000/api/countries')
.then(response => {
countries.data = response.data.data; // Store fetched countries in reactive object
})
.catch(error => {
console.error('Error fetching countries:', error);
});
});
// Computed property to get the first country
const firstCountry = computed(() => {
return countries.data.length > 0 ? countries.data[0] : null;
});
// Method to handle file change for profile image
const onFileChange = (event) => {
const file = event.target.files[0];
formData.value.profileimg = file;
};
// Method to submit form
const submitForm = () => {
// Logic to submit form data to API
console.log(formData.value);
};
// Method to handle country change event
const onCountryChange = (event) => {
formData.country = event.target.value;
};
return {
formData,
years,
ageOptions,
countries,
firstCountry,
onFileChange,
submitForm,
onCountryChange,
};
},
};
</script>
Tbh i have no idea what i did..... i tried to display just 1 first then i just added it to a dropdown with v-for. I think i need some sleep now :(
@karu Ah yes I now see that countries is a reactive property.
With reactive properties you don't have to use .value in script like when using ref.
Please or to participate in this conversation.