模态不显示 axios 获取的数据答案

【问题标题】：Modal doesn't display data fetched by axios模态不显示 axios 获取的数据
【发布时间】：2019-12-22 19:36:37
【问题描述】：

我是 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;
}

【问题讨论】：

1.你不需要两个.then() 链，先在里面做东西就足够了。 2.尝试在模态体上放置v-if='birthday.length >0'。 3.不建议将jQuery与vue混合使用。

标签： php laravel vue.js axios

【解决方案1】：

首先，欢迎来到 StackOverflow HelloWorld1014！

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

我做了这样的事情：

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

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

【讨论】：

感谢您的问候，但我没有使用 datepicker.js
我知道，我只是举了一个例子来说明我是如何解决我的问题的。尝试相同的方法，但使用您的 .js 脚本

【解决方案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.')
            }
        }

希望这会有所帮助。

【讨论】：