laravel - 猫头鹰旋转木马吐出单个物品而不是旋转木马

Question

我正在尝试制作一个轮播，从最新开始显示特定区域的新导师列表。我正在使用 laravel 5.6、vue.js 和 owl carousel。

下面我使用 axios 从数据库中检索，并调用 owl-carousel

<script>
      export default {
    props: {
      areaId: null,
    },

    data () {
      return {
        NewTutors: {}
      }
    },

    methods: {
      getNewTutor () {
        var that = this;
        axios.get( '/' + this.areaId + '/home/new').then((response) => {
          that.NewTutorss = response.data;
        })
        .catch(error => {
          console.log(error)
          this.errored = true
        });
      }
    },

    mounted () {
      this.getNewTutor();
    }
  }
      $(document).ready(function() {
        $('#NewHustles').owlCarousel();
    });

</script>

在这里，尝试在轮播中循环浏览每个新导师。

<div class="owl-carousel owl-theme owl-loaded" id="NewTutors">

    <div class="owl-stage-outer">

        <div class="owl-stage">


            <div class="owl-item" v-for="NewTutor in NewTutors>
                <div class="card">
                    <div class="card-header">
                        {{NewTutor.name}}
                    </div>
                <div class="card-body">
                  <div>
                    {{NewTutor.area.name}}
                  </div>
                  <div>
                    Image goes here
                  </div>
                  <div>
                    {{NewTutor.user.first_name}}
                  </div>
                </div>
                </div>
            </div>


            </div>

        </div>
    </div>

我得到了所有卡片，并通过了正确的数据，但是我得到的不是单行轮播，而是一大堆卡片，它们像只有一个项目一样移动。我已经尝试过 Vue.nexttick，并尝试了其他一些东西，但似乎没有什么能正常工作。

谢谢您的帮助。

标签： laravelvue.jsowl-carousel