Subscribe on changes!

The data properties are not able to use them into other script parts

avatar
Aug 21st 2022

Vue version

3.2.37

Link to minimal reproduction

https://sfc.vuejs.org

Steps to reproduce

  1. Create a data method
  2. in the data method, add some properties with thier values
  3. Call someone property into the setup function or into the methods functions

What is expected?

I expect these properties declared into the data method, they could be used in the methods functions or in the setup function at least.

What is actually happening?

The typescript compiler highlights this uses as errors

I'm migrating a project from v2 to v3 and I just to noticed that the data properties defined are not available to use them in the methods so what I tried to move them to setup function and happen the same.

I noticed that this way it the only way to access to them

setup() {
  console.log(this.data().fieldsValid)
  console.log(this.methods.checkDataSubmited())
}

nevertheless this is not the correct way following the docs

System Info

System:
    OS: macOS 12.5
    CPU: (8) x64 Intel(R) Core(TM) i5-8257U CPU @ 1.40GHz
    Memory: 28.96 MB / 8.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.16.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 8.11.0 - /usr/local/bin/npm
  Browsers:
    Brave Browser: 101.1.38.111
    Chrome: 104.0.5112.101
    Firefox: 101.0.1
    Safari: 15.6
  npmPackages:
    vue: ^3.2.37 => 3.2.37
    typescript: 4.7.4

Any additional comments?

image image image image
avatar
Aug 21st 2022

Serup runs before data. There is no way to access Options API properties in setup. This is intended and documented.

avatar
Aug 21st 2022

@LinusBorg Ok but Why I can't access them into the methods?

In the doLogin Method, Im suposing as V2 I should be able to access them, rigth or not?

avatar
Aug 21st 2022

You can. The code would run. But you did not wrap the component in defineComponent(), so Typescript doesn't recognize the object as a component and consequently gives you type errors as if it was a plain object.

avatar
Aug 21st 2022

Ok nevertheless the docs don't mention nothing about that Into the migration part. Also the docs show multiples examples that works with the exactly the code that I shared with you, you should think in change that parts.

avatar
Aug 21st 2022

Please suggest improvements to the docs in the docs repository, we are open to contributions.

It might indeed to be helpful to mention the requirement for defineComponent() for Typescript users in the migration docs.

Besides that, I mention again: The methods work at runtime, defineComponent()is only necessary for correct type inference, which is explained in the docs covering Typescript here