我正在嘗試制作一個當一個人的生日是今天時彈出的模式。到目前為止,下面的代碼有效。但是現在如果今天有多個人生日相同,我想顯示多個模態。Vue 中的新功能。謝謝模板<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.image_name" width="250px" height="250px" class="img img-responsive" /> <h3 class="mt-3">{{birthday.alias_name}}</h3> <h3>{{birthday.dob | dateFormatText}}</h3> </div> </div> </div></div>腳本<script>export default { data() { return { birthday: [], } }, methods: { birthdayModal() { axios.get('api/members/birthday').then(res => this.parseAndDisplay(res)) }, parseAndDisplay(result) { this.birthday = result.data[0] if (this.birthday != null) { $('#birthdayModal').modal('show') console.log('Birthday Data: ', this.birthday) } else { console.log('Nobody Birthday') } }, }, created() {}, mounted() { this.birthdayModal() console.log('Component mounted.') },}</script>控制器public function birthday(){ $date = Carbon::now(); $member = Member::whereMonth('dob', '=', $date->month)->whereDay('dob', '=', $date->day)->get(); return $member;}
2 回答

鴻蒙傳說
TA貢獻1865條經驗 獲得超7個贊
我認為以下步驟將幫助您解決問題:
如果要顯示多個人的生日,則需要所有人的信息。創建一個像生日這樣的人的數組。
person:[]
在模態上創建一個 for 循環。
<div class="modal fade" tabindex="-1" id="birthdayModal" role="dialog" v-for"person in persons"> ------ </div>
如果有一個人的生日,然后將其解雇。

守著一只汪
TA貢獻1872條經驗 獲得超4個贊
我認為問題是這一行:
this.birthday = result.data[0]
這樣,您始終只能獲得一個人的數據。將您的所有人數據放在一個變量中,例如this.persons = result.data
. 然后使用v-for
循環遍歷它們。
- 2 回答
- 0 關注
- 180 瀏覽
添加回答
舉報
0/150
提交
取消