模态显示1人以上生日数据答案

【问题标题】：Display birthday data of more than 1 person in modal模态显示1人以上生日数据
【发布时间】：2019-08-17 08:18:26
【问题描述】：

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

Console Result
Network Result

【问题讨论】：

请不要包含图片，除非它们确实是强制性的

标签： php laravel twitter-bootstrap vue.js

【解决方案1】：

我认为这些步骤将帮助您解决问题：

如果要显示多人的生日，则需要所有人的信息。创建一组人，例如生日。 person:[]
在 modal 上创建一个 for 循环。

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

如果有一个人的生日，那就解雇它。

【讨论】：

我尝试使用 v for 循环，但它不起作用。我认为 axios 响应数据有问题。尝试检查上面给出的控制台 n 网络映像。好像不一样

【解决方案2】：

我认为问题出在这一行：

this.birthday = result.data[0]

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

【讨论】：