亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

模態顯示超過1人的生日數據

模態顯示超過1人的生日數據

PHP
千萬里不及你 2021-11-26 16:46:25
我正在嘗試制作一個當一個人的生日是今天時彈出的模式。到目前為止,下面的代碼有效。但是現在如果今天有多個人生日相同,我想顯示多個模態。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個贊

我認為以下步驟將幫助您解決問題:

  1. 如果要顯示多個人的生日,則需要所有人的信息。創建一個像生日這樣的人的數組。person:[]

  2. 在模態上創建一個 for 循環。

<div class="modal fade" tabindex="-1"  id="birthdayModal" role="dialog" v-for"person in persons">
   ------
</div>
  1. 如果有一個人的生日,然后將其解雇。


查看完整回答
反對 回復 2021-11-26
?
守著一只汪

TA貢獻1872條經驗 獲得超4個贊

我認為問題是這一行:

this.birthday = result.data[0]

這樣,您始終只能獲得一個人的數據。將您的所有人數據放在一個變量中,例如this.persons = result.data. 然后使用v-for循環遍歷它們。


查看完整回答
反對 回復 2021-11-26
  • 2 回答
  • 0 關注
  • 180 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號