The data properties are not able to use them into other script parts
Vue version
3.2.37
Link to minimal reproduction
Steps to reproduce
- Create a data method
- in the data method, add some properties with thier values
- 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?
Serup runs before data. There is no way to access Options API properties in setup. This is intended and documented.
@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?
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.
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.
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