模态显示超过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

我认为以下步骤将帮助您解决问题：如果要显示多个人的生日，则需要所有人的信息。创建一个像生日这样的人的数组。person:[]在模态上创建一个 for 循环。<div&nbsp;class="modal&nbsp;fade"&nbsp;tabindex="-1"&nbsp;&nbsp;id="birthdayModal"&nbsp;role="dialog"&nbsp;v-for"person&nbsp;in&nbsp;persons"> &nbsp;&nbsp;&nbsp;------ </div>如果有一个人的生日，然后将其解雇。

Answer 2

我认为问题是这一行：this.birthday&nbsp;=&nbsp;result.data[0]这样，您始终只能获得一个人的数据。将您的所有人数据放在一个变量中，例如this.persons = result.data.&nbsp;然后使用v-for循环遍历它们。