模态显示超过1人的生日数据

Question

我正在尝试制作一个当一个人的生日是今天时弹出的模式。到目前为止，下面的代码有效。但是现在如果今天有多个人生日相同，我想显示多个模态。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;}

Answer 1

我认为以下步骤将帮助您解决问题：

1. 如果要显示多个人的生日，则需要所有人的信息。创建一个像生日这样的人的数组。person:[]

2. 在模态上创建一个 for 循环。

<div class="modal fade" tabindex="-1"  id="birthdayModal" role="dialog" v-for"person in persons">
   ------
</div>

1. 如果有一个人的生日，然后将其解雇。

Answer 2

我认为问题是这一行：

this.birthday = result.data[0]

这样，您始终只能获得一个人的数据。将您的所有人数据放在一个变量中，例如this.persons = result.data. 然后使用v-for循环遍历它们。