Можно ли имитировать щелчок по элементу router-link с помощью другой функции в vue

Можно ли имитировать щелчок по элементу router-link с помощью другой функции в vue

20.10.2019 02:42:28 Просмотров 139 Источник

Есть ли способ, чтобы имитировать события 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

Является ответом!
eli chen

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

https://stackoverflow.com/questions/58472653/is-it-possible-to-simulate-click-on-router-link-element-via-another-function-in/58472762#comment103278865_58472762
Я пробую это, и теперь я получаю ошибку в консоли "ошибка в render:" TypeError: не удается прочитать свойство "title" undefined",
https://stackoverflow.com/questions/58472653/is-it-possible-to-simulate-click-on-router-link-element-via-another-function-in/58472762#comment103278903_58472762
похоже, проблема с вашим массивом фильмов, который не связан с функцией loadRouterFunction. вы уверены, что каждый фильм имеет свойство заголовка. обратите внимание, что вы установили его как ключ в v-for. и даже поставить его как carousel-title, так что его должно быть exsist на каждый элемент в массиве
https://stackoverflow.com/questions/58472653/is-it-possible-to-simulate-click-on-router-link-element-via-another-function-in/58472762#comment103278932_58472762
Я думаю, проблема в том, что я не могу получить доступ к объекту фильма за пределами моей карусели, чтобы передать идентификатор в качестве параметра компонентному методу
https://stackoverflow.com/questions/58472653/is-it-possible-to-simulate-click-on-router-link-element-via-another-function-in/58472762#comment103278942_58472762
конечно, вы не можете. его доступна только в рамках V-для
https://stackoverflow.com/questions/58472653/is-it-possible-to-simulate-click-on-router-link-element-via-another-function-in/58472762#comment103278966_58472762
Да, и именно поэтому я пытаюсь имитировать (триггер) щелчок по элементу router-link из другого метода
https://stackoverflow.com/questions/58472653/is-it-possible-to-simulate-click-on-router-link-element-via-another-function-in/58472762#comment103279017_58472762
в приведенном выше коде я имитирую router-link, но вам нужно предоставить информацию для функции. просто поместите v-btn внутри карусели или поместите v-for В div, который будет содержать все элементы
https://stackoverflow.com/questions/58472653/is-it-possible-to-simulate-click-on-router-link-element-via-another-function-in/58472762#comment103279037_58472762
Это нарушило бы мой макет
https://stackoverflow.com/questions/58472653/is-it-possible-to-simulate-click-on-router-link-element-via-another-function-in/58472762#comment103279107_58472762
у вас есть элементы карусели и одна кнопка, которая говорит просмотр деталей. некоторые, как кнопка должна знать, какой элемент вы хотите пойти. вы можете сделать это, добавив свойства данных, такие как movieId, и в каждом carousel-itemможет прочитать его оттуда и вам не нужно отправлять его как paramter
https://stackoverflow.com/questions/58472653/is-it-possible-to-simulate-click-on-router-link-element-via-another-function-in/58472762#comment103279162_58472762
можете ли вы показать это в коде
https://stackoverflow.com/questions/58472653/is-it-possible-to-simulate-click-on-router-link-element-via-another-function-in/58472762#comment103279265_58472762
обновлен код
Закрыть X