Vue轮播自动播放不会在标志更改时停止

Question

我希望轮播一直自动播放，直到用户点击dropdown，其中轮播转到该选项slide，并且自动播放应该停止。

我唯一不能做的是停止autoplay，我安装了vue devtools，它在轮播组件中显示，当我在dropdown 中选择一个选项时，自动播放的标志会改变它使用我在 doAutoplay 属性中传递的值，。 我正在像这样使用ssense vue-carousel

//Vue imports
....
import VueCarousel from 'vue-carousel';
Vue.use(VueCarousel);

在模板中

<carousel :loop="true" :per-page="1" :autoplay="doAutoplay" :autoplay-timeout="4000" :pagination-enabled="false" :mouse-drag="false" :navigate-to="sede == '' ? 0 : sede" :autoplay-hover-pause="false">
    <slide>
        <img :src="$asset('images/backgrounds/background1.jpg')">
    </slide>
    ....
    //more slides
</carousel>

这是下拉菜单

<md-field>
    <md-select v-model="sede" name="sede" id="sede">
        <md-option :value="index" v-for="(s, index) in sedes" :key="index">{{ s.name }}</md-option>
    </md-select>
</md-field>

剩下的

export default {
    data : () => {
        return {
            ...
            sede     : '',
            sedeData : {},
            sedes    : [],
            doAutoplay : true
        }
    },
    created : function(){

        axios.get(this.$asset('api/inicio')).then((response) => {
            this.sedes      = response.data.sedes;//this is the data for the dropdown
        }).catch(() => {
        });

    },
    watch : {
        sede(){
            //i watch the dropdown for changes, if it does, i reevaluate the doAutoplay prop.
            this.doAutoplay = false;
            this.sedeData = this.sedes[this.sede];
        }
    }

}

为什么自动播放在其值更改为 false 后没有停止？我该如何解决这个问题？

Answer 1

property list at Github 不包含 autoplay 属性，这就是轮播不会停止的原因。

尽管如此，有一个speed 属性，您可以在下拉菜单打开时设置为 0，并在下拉菜单关闭时将其恢复为 >0。

编辑：奇怪的是，official docs 中有一个自动播放选项，但 GitHub 的属性列表中没有。