Вызываете миксин Vue напрямую с константой? - PullRequest
Новая
       22

Вызываете миксин Vue напрямую с константой?

0 голосов
/ 07 мая 2019

У меня есть компонент нижнего колонтитула с тремя ссылками.Когда пользователь нажимает на ссылку, помимо перехода на новую страницу, я пытаюсь использовать миксин для отслеживания события нажатия.Когда я устанавливаю точку останова в chrome devtools, кажется, что эта реализация не работает.Я импортировал свой файл констант и нижний колонтитул mixin.

, одну ссылку для краткости 

  <template>
  <footer>
    <div class="container">
      <div class="row">
        <div class="col align-center">
          <a
            href="/"
            target="_blank"
            class="btn"
            name="item"
            @click="logButtonClick(ANALYTICS.ITEM)">{{ $t('footer.item') }}</a>
        </div>
      </div>
    </div>
  </footer>
</template>
<script>
import analytics from '@/mixins/analytics'
import { ANALYTICS } from "@/constants"

export default {
  name: 'PageFooter',
  mixins: [analytics]
}
</script>

mixin 

 methods: {
    logButtonClick (buttonType) { // breakpoint here, get nothing
      this.$analytics.track({
        identifier: `Consumer ${this.$options.name} - ${buttonType} Button`
      })
    }
  }

Я что-то упустил?Должна ли эта реализация работать или у меня должен быть метод, такой как: 

methods: {
selectLink(str) {
  if (str === item) {
    this.logButtonClick(ANALYTICS.ITEM)
    }
  }
}

1 Ответ

0 голосов
/ 08 мая 2019

Исходная ошибка, которую я получил, была

"Свойство или метод ANALYTICS не определены в экземпляре, но на него ссылаются во время рендеринга. Убедитесь, что это свойство является реактивным, либо в параметре данных, либо для компонентов на основе классов, инициализируя свойство."

и

"Uncaught TypeError: Невозможно прочитать свойство ITEM из неопределенного при событии щелчка ...."

По сути это означает, что я не определял ANALYTICS ни в PageFooter (потому что это тупой компонент, я не хотел добавлять объект данных к нему, я хотел сохранить его строго презентационным), либо в экземпляре vue в корне уровень. Поскольку ANALYTICS не определена, ITEM затем выдает еще одну ошибку, поскольку она не может быть свойством undefined.

Это мое решение, я использовал регистр переключателей в добавленном теге и в шаблоне @ click = "selectLink ('asd') " 

methods: {
    selectLink (str) {
      switch (true) {
        case str === 'asd':
          this.logButtonClick(ANALYTICS.ITEM)
          break
        case str === 'efg':
          this.logButtonClick(ANALYTICS.ITEM2)
          break
        case str === 'hij':
          this.logButtonClick(ANALYTICS.ITEM3)
          break
      }
    }
  }

и модульный тест: 

it('[positive] should track analytics if `asd` is passed to selectLink()', () => {
    const str = 'asd'
    const mockFn = jest.fn()
    jest.spyOn(wrapper.vm, 'logButtonClick')
    wrapper.find('a').trigger('click')
    mockFn(str)


expect(wrapper.vm.logButtonClick).toHaveBeenCalledWith(ANALYTICS.COOKIE_CONSENT)
      })

https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties

Мораль истории, вопросы, когда старшие инженеры советуют вам сделать что-то забавное в обзоре кода.

...