Как я могу решить проблему спотыкания Marquee?

Question

Я использую Laravel + Vue. js. Я снимаю объявления через API. Но когда я пишу рукой, шатер работает нормально. Это скользит в непрерывной л oop. Но когда я хочу напечатать значение, которое идет с 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, поскольку это уже реактивное свойство.