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

时间:2019-08-17 08:18:26

标签: php laravel twitter-bootstrap vue.js

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

Console Result
Network Result

2 个答案:

答案 0 :(得分:0)

我认为此步骤将帮助您解决问题:

  1. 如果要显示多人生日,则需要所有人的信息。创建一系列人,例如生日。 SELECT * FROM ( SELECT TOP 1 cost_per_unit, season FROM fruit_imports WHERE season != 'All Year' AND season = 'Winter' UNION SELECT TOP 1 cost_per_unit, season FROM fruit_imports WHERE season != 'All Year' AND season = 'Spring' UNION SELECT TOP 1 cost_per_unit, season FROM fruit_imports WHERE season != 'All Year' AND season = 'Summer' UNION SELECT TOP 1 cost_per_unit, season FROM fruit_imports WHERE season != 'All Year' AND season = 'Fall') as tab ORDER BY cost_per_unit DESC

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

person:[]
  1. 如果有一个人的生日,则开除。

答案 1 :(得分:0)

我认为问题是此行:

/data # ping flask
PING flask (172.18.0.4): 56 data bytes
64 bytes from 172.18.0.4: seq=0 ttl=64 time=0.106 ms
64 bytes from 172.18.0.4: seq=1 ttl=64 time=0.162 ms
64 bytes from 172.18.0.4: seq=2 ttl=64 time=0.163 ms
64 bytes from 172.18.0.4: seq=3 ttl=64 time=0.166 ms
64 bytes from 172.18.0.4: seq=4 ttl=64 time=0.143 ms
^C
--- flask ping statistics ---
5 packets transmitted, 5 packets received, 0% packet loss
round-trip min/avg/max = 0.106/0.148/0.166 ms

这样,您始终只能获取一个人的数据。将所有人数据放入变量中,例如from app import app from redis import Redis redis = Redis(host='redis', port=6379) @app.route('/') def hello(): return f"<h1>This Compose/Flask demo has been viewed {redis.incr('hits')} time(s)</h1>." # return "hello, world" 。然后使用this.birthday = result.data[0] 遍历它们。