Можно ли имитировать щелчок по элементу router-link с помощью другой функции в vue
Есть ли способ, чтобы имитировать события click на маршрутизаторе-соединения элементов в Vue. Я помещаю элемент router-link в свою карусель, потому что там у меня есть доступ к объекту movie, который мне нужен для передачи параметров router-link, но там его очень сложно правильно стилизовать, поэтому я буду использовать кнопку вне карусели и при нажатии вызвать функцию для имитации нажатия на router-link. В конце концов, я скрою элемент router-link и буду использовать только кнопку, с которой я передаю событие click для функции, выполняющей симуляцию. Я новичок в vue, поэтому, пожалуйста, сжальтесь надо мной:)
Вот этот код
<v-carousel-item
style="cursor:pointer"
v-for="movie in popularMovies"
:key="movie.title"
:src="apiUrl + movie.poster_path"
>
<div class="carousel-title">
<p>{{movie.title}}</p>
</div>
<router-link
:to="{ name: 'MovieDetails', params: { id: movie.id }}">
VIEW MORE</router-link>
</v-carousel-item>
</v-carousel>
<div style="text-align:center;">
<v-btn @click="loadRouterLink">VIEW DETAILS</v-btn>
</div>
и метод
methods: {
...mapActions(["fetchPopularMovies"]),
loadRouterLink () {
//do something here to simulate click on router-link element
}
},
Ответы - Можно ли имитировать щелчок по элементу router-link с помощью другой функции в vue / Is it possible to simulate click on router-link element via another function in vue
20.10.2019 02:57:37
вот так просто
loadRouterLink (movieId) {
this.$router.push({ name: 'MovieDetails', params: { id: movieId }})
}
обратите внимание, что я добавил параметр movieId в loadRouterLinkоснован на v-for, поэтому функция должна знать, что такое id (на основе paramter - конечно, вы можете сделать это другими способами)
в вашем html вы должны отправить правильный идентификатор в качестве параметра этой функции
или вы можете сделать это по-другому (та же идея)
movieidи в части js
<v-carousel-item @click="movieId=movie.id"
style="cursor:pointer"
v-for="movie in popularMovies"
:key="movie.title"
:src="apiUrl + movie.poster_path"
>
<div class="carousel-title">
<p>{{movie.title}}</p>
</div>
<router-link
:to="{ name: 'MovieDetails', params: { id: movie.id }}">
VIEW MORE</router-link>
</v-carousel-item>
</v-carousel>
<div style="text-align:center;">
<v-btn @click="loadRouterLink">VIEW DETAILS</v-btn>
</div>
источник - https://router.vuejs.org/guide/essentials/navigation.html
loadRouterFunction. вы уверены, что каждый фильм имеет свойство заголовка. обратите внимание, что вы установили его как ключ в v-for. и даже поставить его как carousel-title, так что его должно быть exsist на каждый элемент в массиве
router-link, но вам нужно предоставить информацию для функции. просто поместите v-btn внутри карусели или поместите v-for В div, который будет содержать все элементы
carousel-itemможет прочитать его оттуда и вам не нужно отправлять его как paramter