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(...).

例如：

    export default {

            data(){

                return{

                    birthday:[],

                }

            },

            methods:{

                birthdayModal(){

                     axios.get('api/members/birthday').then(res=>this.parseAndDisplay(res));

                },

                parseAndDisplay(result){

                     this.birthday = result.data;

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

                     console.log("Birthday Data: ", this.birthday);

                }

            },

            created(){

            },

            mounted() {

                this.birthdayModal();

                console.log('Component mounted.')

            }

        }

希望这可以帮助。

Answer 2

首先，欢迎来到 StackOverflow HelloWorld1014！

我在我的项目中遇到了类似的问题，datepicker.js 不会在我的模式中加载。我通过在模态显示事件上重新初始化日期选择器解决了这个问题。

我做了这样的事情：

$('#myModal').on('shown.bs.modal', function (e) {

     $('.date').datepicker();

});

希望这可以引导您朝着正确的方向前进。