My experience with making HTTP calls is limited, and I am facing an issue while trying to populate specific properties of each object into a dropdown. Despite attempting various methods, such as using a for loop, the dropdown remains empty.
created(){
axios
.get("https://jsonplaceholder.typicode.com/posts")
.then(res => {
let result = res.data
for(i = 0; i <= result.length;i++){
this.todos = result[i];
}
})
}
I also attempted to display a single value in the response within <li>, which worked perfectly fine.
<ul>
{{user.todos}}
</ul>
However, when using v-for in the select element of the dropdown, it does not work as expected.
<select name="" id="">
<option value="" selected disabled>Please Select..</option>
<option value="" v-for="todo in user.todos">{{todo}}</option>
</select>
You can find my complete code on CodePen. What could be missing or what am I doing wrong?