Modal 不显示 axios 获取的数据

Question

我是 Vue 的新手，并试图将 axios 获取的数据显示为模态。

问题是模式不显示数据。

我检查了生日变量，它确实包含数据。

模板

<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.dob"

          width="250px"

          height="250px"

          class="img img-responsive"

        />

        <h3 class="mt-3">{{birthday.alias_name}}</h3>

        <h3>{{birthday.dob}}</h3>

      </div>

    </div>

  </div>

</div>

脚本

<script>

export default {

  data() {

    return {

      birthday: [],

    }

  },

  methods: {

    birthdayModal() {

      axios

        .get('api/members/birthday')

        .then(res => (this.birthday = res.data))

        .then($('#birthdayModal').modal('show'))

      console.log('Birthday Data: ', this.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

正如@ambianBeing 指出的那样，您不需要两个.then(...). 相反，您应该创建另一个方法，并在您的第一个.then(...).例如：&nbsp; &nbsp; export default {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; birthday:[],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; methods:{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; birthdayModal(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;axios.get('api/members/birthday').then(res=>this.parseAndDisplay(res));&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; parseAndDisplay(result){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;this.birthday = result.data;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;$('#birthdayModal').modal('show'));&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;console.log("Birthday Data: ", this.birthday);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; created(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; mounted() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.birthdayModal();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log('Component mounted.')&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }希望这可以帮助。

Answer 2

首先，欢迎来到 StackOverflow HelloWorld1014！我在我的项目中遇到了类似的问题，datepicker.js 不会在我的模式中加载。我通过在模态显示事件上重新初始化日期选择器解决了这个问题。我做了这样的事情：$('#myModal').on('shown.bs.modal', function (e) {&nbsp; &nbsp; &nbsp;$('.date').datepicker();});希望这可以引导您朝着正确的方向前进。