Как использовать Vue Router программно с нативными событиями? - PullRequest
Новая
       16

Как использовать Vue Router программно с нативными событиями?

0 голосов
/ 30 октября 2018

Я пытался использовать собственные события с маршрутизатором Vue, используя это. $ Router.push, и я продолжаю выдавать следующую ошибку: 

[Vue warn]: Invalid handler for event "click": got undefined

found in

---> <section>

Кажется, я не могу понять, почему, и мне приходится использовать несколько решений, каждое из которых вызывает вышеуказанную ошибку. Некоторые из них перенаправляют на страницу непосредственно перед тем, как вызвать событие.

Вещи, которые я пробовал:

1 

//in JSX
<section nativeOnClick={this.navigationPage('login')}></section>

// in methods I have the following:
methods: {
  navigationPage: function (page) {
    this.$router.push(page)
  }
}

2 

//in JSX
<section nativeOnClick={this.$router.push('login')}></section>

Одно из следующих решений: 

//in JSX
<section nativeOnClick={this.navigateToLogin}></section>

// in methods I have the following:
methods: {
  navigateToLogin: function () {
    this.$router.push(page)
  }
}

Не могли бы вы сообщить мне, что я делаю неправильно в 1 и 2. Решение, которое работает хорошо, но требует от меня создания метода для каждой навигации. Мне лично нравится 2 !!

Любая помощь приветствуется

NEW Ниже приведено полное определение компонента: 

//navbar.js

import styles from './index.styl'
import logo from 'Src/assets/logo.svg'
import menu from 'Src/assets/menu.svg'

export default {
  name: 'NavBar',
  methods: {
    navigationPage: function (page) {
      this.$router.push(page)
    }
  },
  render (h) {
    return (
      <ui-nav class={styles.nav}>
        <ui-section class={styles.navLogo} nativeOnClick={ this.navigationPage('hello') }>
          <ui-image source={logo} />
        </ui-section>
        <ui-spacer />
        <ui-section class={styles.navMenu}>
          <ui-image source={menu} />
        </ui-section>
      </ui-nav>
    )
  }
}

Примечание. Этот стиль также автоматически переключается на /hello (т. Е. До события щелчка). Я не знаю почему.

Ответы [ 2 ]

0 голосов
/ 31 октября 2018

Похоже, что есть одно решение, которое работает, но я не могу понять, почему оно работает!

рабочий раствор: 

<section nativeOnClick={ () => this.$router.push('hello') }></section>

Что сбивает с толку, так это то, что передача аргументов без обработчика выдает ошибку, если при переносе с функцией этого не происходит. * 1006 т.е. * 

<section nativeOnClick={ this.$router.push('hello') }></section> // GIVES error
0 голосов
/ 30 октября 2018

Вы пытались удалить зарезервированное слово this из собственного вызова jsx? Например: 

<section nativeOnClick={ navigationPage('login') }></section>

Если вы сможете опубликовать весь сценарий вашего отдельного файлового компонента (или того, что вы редактируете), мне было бы полезно быть в контексте.

...