我怎样才能解决广场绊倒的问题？

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，因为它已经是一个反应性属性。