Modal doesn't display data fetched by axios - php

Question

I'm new to Vue and trying to display data fetched by axios to a modal.
The problem is the modal doesn't display the data.
I've checked the birthday variable and it does contain the data.
Template
<div class="modal fade" tabindex="-1" id="birthdayModal" role="dialog">
<div class="modal-dialog modal-md modal-dialog-centered" role="document">
<div class="modal-content mx-auto text-center bg-danger text-warning">
<div class="modal-body">
<h1>
HAPPY
<i class="fa-fw fas fa-birthday-cake"></i> BIRTHDAY!
</h1>
<img
:src="'/img/members/' +birthday.dob"
width="250px"
height="250px"
class="img img-responsive"
/>
<h3 class="mt-3">{{birthday.alias_name}}</h3>
<h3>{{birthday.dob}}</h3>
</div>
</div>
</div>
</div>
Script
<script>
export default {
data() {
return {
birthday: [],
}
},
methods: {
birthdayModal() {
axios
.get('api/members/birthday')
.then(res => (this.birthday = res.data))
.then($('#birthdayModal').modal('show'))
console.log('Birthday Data: ', this.birthday)
},
},
created() {},
mounted() {
this.birthdayModal()
console.log('Component mounted.')
},
}
</script>
Controller
public function birthday()
{
$date = Carbon::now();
$member = Member::whereMonth('dob', '=', $date->month)->whereDay('dob', '=', $date->day)->get();
return $member;
}

Answer 1

First of all, welcome to StackOverflow HelloWorld1014!
I had a similar problem in my project, where datepicker.js wouldn't load in my modal. I resolved this by re-initializing the datepicker on modal shown event.
I did something like this:
$('#myModal').on('shown.bs.modal', function (e) {
$('.date').datepicker();
});
Hope that this can lead you in right direction.

Answer 2

As #ambianBeing pointed out, you don't need two .then(...). Instead, you should create another method, and call it in your first .then(...).
For example:
export default {
data(){
return{
birthday:[],
}
},
methods:{
birthdayModal(){
axios.get('api/members/birthday').then(res=>this.parseAndDisplay(res));
},
parseAndDisplay(result){
this.birthday = result.data;
$('#birthdayModal').modal('show'));
console.log("Birthday Data: ", this.birthday);
}
},
created(){
},
mounted() {
this.birthdayModal();
console.log('Component mounted.')
}
}
Hope this helps.