Почему anime.js не работает по клику во vuejs?

Question

[Sector567]

Есть вот такой компонент.
Сейчас, благодаря mounted() анимация успешно отрабатывает при обновлении страницы, но вот по клику анимация почему-то не воспроизводится. Консоль лог по клику выводится, а анимации нет. В чем я допустил ошибку?

P.S. ошибки в консоли нет, но при этом, если я в методе testClickGo() не буду писать return, то ошибка будет вида:
"Cannot read property 'restart'". Я это к тому, что 'restart' он видит в данной библиотеке, но почему-то анимацию не запускает.

<template>
	<div class="compHeader">
		<h1 class="testVal" style="position: absolute;">QWERTY</h1>
		<button type="button" class="testClick" @click="testClickGo().restart">+</button>
	</div>
</template>

<script>
	export default {
		methods: {
			testClickGo(){
				console.log(111);
				return this.$anime({
					targets: '.testVal',
					translateX: 200,
					delay: 800
				});
			}
		},
		mounted(){
			this.testClickGo();
		}
	}
</script>

Comments

[Игорь]

testClickGo().restart()

[Игорь]

Или так

<button type="button" class="testClick" @click="() => { testClickGo().restart() }">+</button>

[Sector567]

Игорь, попробовал оба варианта, но ничего не поменялось

Answer 1

[0xD34F]

@click="testClickGo().restart"

То есть, попробовать вызвать метод вы не догадались. Это печально.

И если уж вы собираетесь анимацию перезапускать, наверное, надо вместо создания новых объектов сохранить ссылку на тот, что был создан при первом запуске.

targets: '.testVal',

Так не надо, используйте ref.

data: () => ({
  anime: null,
}),
mounted() {
  this.anime = this.$anime({
    targets: this.$refs.animeEl,
    translateX: 200,
    delay: 800,
  });
},

<h1 ref="animeEl">hello, world!!</h1>
<button @click="anime.restart()">click me</button>

Comments

[Sector567]

Большое спасибо за помощь, даже и не предполагал, что кто-то сможет с этим помочь.