Почему эта область видимости изменяется при вызове из шаблона или наблюдателя? - PullRequest
Новая
       45

Почему эта область видимости изменяется при вызове из шаблона или наблюдателя?

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

Что касается моего предыдущего вопроса , который содержит весь код, мне интересно, почему это работает нормально: 

<template>
  <q-drawer
    @mouseover="setMiniState(false)"
    @mouseout="setMiniState(true)"
</template>

<script>
import { defineComponent, ref, watch } from '@vue/composition-api'

export default defineComponent({
  setup() {
    const miniState = ref(true)

    function setMiniState(state) {
      console.log('setMiniState widht is ', this.$q.screen.width)
    }

    return {
      miniState, setMiniState
    }
  }
})

Но это не так: 

    function setMiniState(state) {
      console.log('setMiniState widht is ', this.$q.screen.width)
    }

    watch('$q.screen.width', () => setMiniState())

Когда вызывается наблюдатель, переменная $q становится undefined, это не тот случай, когда та же функция вызывается из шаблона. Похоже, что область действия this меняется в зависимости от того, как вызывается функция setMiniState.

Обходной путь 1

Проверьте функцию setMiniState, если доступен аргумент width: 

<template>
  <q-drawer
    @mouseover="setMiniState(false)"
    @mouseout="setMiniState(true)"
</template>

function setMiniState(state, width) {
  let screenWidth = ''
  if (!width) {
    screenWidth = this.$q.screen.width
  } else {
    screenWidth = width
  }
  console.log('setMiniState this is ', screenWidth)
}

watch('$q.screen.width', (width) => setMiniState(undefined, width))

Обходной путь 2

Всегда отправлять state и width аргументы: 

<template>
  <q-drawer
    @mouseover="setMiniState(false, $q.screen.width)"
    @mouseout="setMiniState(true, $q.screen.width)"
</template>

function setMiniState(state, width) {
  console.log('setMiniState this is ', width)
}

watch('$q.screen.width', (width) => setMiniState(undefined, width))

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

1 Ответ

0 голосов
/ 11 мая 2020

Почему вы пишете '$q.screen.width'?

Попробуйте так: 

watch(() => this.$q.screen.width, setMiniState)
...