如何解决 Marquee 绊倒问题？

Question

我正在使用 Laravel + Vue.js。 我通过 API 拍摄公告。 但是当我用手书写时，选框工作正常。 它在一个连续的循环中滑动。 但是当我想打印 vue.js 附带的值时，文本到达末尾时不会移动。 绞刑。 颤抖。

$('.marquee').marquee({
    //speed in milliseconds of the marquee
    duration: 8000,
    //gap in pixels between the tickers
    gap: 0,
    //time in milliseconds before the marquee will start animating
    delayBeforeStart: 0,
    //'left' or 'right'
    direction: 'left',
    //true or false - should the marquee be duplicated to show an effect of continues flow
    duplicated: true
});

Vue.js 代码

export default {
    data() {
        return {
            announcements: ""
        }
    },

    created() {
        this.getAnnouncements();
    },

    methods: {
        getAnnouncements() {
            axios.get('/get-announcements')
                .then((response) => {
                    this.announcements = response.data;
                })
                .catch(function (error) {
                    console.log(error);
                })
        }
    },

    mounted() {
        setInterval(() => {
            this.getAnnouncements();
        }, 10000);
    },

    watch: {
        announcements(val) {
            this.announcements = val
        }
    }
}

在职的;

<div id="tv-announcement" class="marquee">
    Lorem ipsum test.Lorem ipsum test.Lorem ipsum test.Lorem ipsum test. 
</div>

不工作；

<div id="tv-announcement" class="marquee">
    {{ announcements }}
</div>

为什么会这样？ 这很荒谬。

Answer 1

从 AJAX 请求中获取数据后初始化选取框。 而且你不需要看announcements因为它已经是一个反应性的属性。