Function not recognized by the new Vue Composition API

Question

We're trying to convert a simple SFC to use the new Vue CompositionAPI. This code works flawless:

export default {
  data() {
    return {
      miniState: true
    }
  },
  methods: {
    setMiniState(state) {
      if (this.$q.screen.width > 1023) {
        this.miniState = false;
      } else if (state !== void 0) {
        this.miniState = state === true
      }
      else {
        this.miniState = true
      }
    },
  },
  watch: {
    '$q.screen.width'() {
      this.setMiniState()
    }
  }
};

Converting this to the new CompostionAPI looks like this:

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

    const setMiniState = (state) => {
      if ($q.screen.width > 1023) {
        miniState.value = false
      } else if (state !== void 0) {
        miniState.value = state === true
      }
      else {
        miniState.value = true
      }
    }

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

    return {
      miniState, setMiniState
    }
  }
})

However, every time I try to run this Vue complains that $q.screen.width is not a function. What am I doing wrong here?

Radu Diță · Accepted Answer · 2020-05-07 09:14:15Z

2

You're calling $q.screen.width instead of adding it as a watch source.

Try this:

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

answered May 7, 2020 at 9:14

Radu Diță

14.3k2 gold badges33 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Function not recognized by the new Vue Composition API

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related