Question

我是Vue的新手，正在尝试将axios提取的数据显示到模式中。
问题在于模态不显示数据。
我检查了Birthday变量，它确实包含数据。

模板

<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

首先，欢迎使用StackOverflow HelloWorld1014！

我的项目中有一个类似的问题，即datepicker.js不会加载到我的模态中。我通过在显示为event的模式上重新初始化datepicker来解决了这个问题。

我做了这样的事情：

$('#myModal').on('shown.bs.modal', function (e) {
     $('.date').datepicker();
});

希望这可以引导您走向正确的方向。

Answer 2

正如@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.')
            }
        }

希望这会有所帮助。

模态不显示axios提取的数据

2 个答案: