Vue JS - vue-class-component binding input

Solution 1:

In Vue class component decorators, the Options API's data() function is abstracted away.

The @Component decorator is a function responsible for transpiling your code from Class API syntax into Options API syntax.

Namely, behind the scenes:

• all class props are turned into data() reactive props,
• all getters/setters are turned into computed props
• all class methods (regular functions) are turned into methods.

So just declare the props directly on the class instance:

@Component
export default class Form extends Vue {
  id = "";
  name = "";
  age = 0;
  amountA = 0;
  amountB = 0;
  capitalA = 0;
  capitalB = 0;

  // props declared above are reactive and you can now use them
  // in getters or methods
}

See the example in the Overview page. In more detail, this particular comment:

// Class properties will be component data

Warning: If you're just picking up Vue, be warned Vue class decorators syntax is on a downwards usage trend and problems with Vue 3 compatibility are to be expected (and have already started to surface). Have a look at the open issues on their repo.

On the same note, you might want to read this comment by Evan You¹, ref usage of Vue class component decorators:

It definitely isn't a recommended option anymore in official docs or default tooling (moving to Vite-based soon and vue-cli will be in maintenance mode).
Deprecation will depend on actual usage and @ktsn's² intention on further working on the project.

¹ :: author of Vue
² :: maintainer of vue-class-component package

Personal advice: installing @vue/composition-api in your Vue 2 project and rewriting its components in Composition API syntax would be more beneficial than writing in class decorators syntax, to both yourself and the project.

In doing this, you'll

• make it possible for the project to be upgraded to Vue 3 with relative ease
• learn Composition API (likely to become the more common Vue syntax), which is more valuable for you, going forward, than learning the component class decorators syntax and workarounds, (likely to become less used, eventually deprecated)

Because the class decorators syntax is dropping in popularity, the support for it might become more difficult to obtain, as time passes.

If rewriting existing components in Composition API is not an option, you could at least write new components in this syntax, as the syntax is incrementally adoptable, it can be used alongside any other valid Vue API syntax.