generate 3 buttons in vue in typescript

To generate 3 buttons in Vue using TypeScript, you can use the following sample code:

<template>
  <div>
    <button @click="buttonClicked('1')">Button 1</button>
    <button @click="buttonClicked('2')">Button 2</button>
    <button @click="buttonClicked('3')">Button 3</button>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';

@Component
export default class MyComponent extends Vue {
  buttonClicked(buttonNumber: string): void {
    console.log(`Button ${buttonNumber} clicked!`);
  }
}
</script>
464 chars
19 lines

In this code, we define a template that contains 3 buttons which call the buttonClicked method on click, passing a string parameter that identifies the button. We then define the component using TypeScript, using the @Component decorator to indicate that our class is a Vue component, and the Vue and vue-property-decorator modules to provide the necessary dependencies. We define the buttonClicked method that simply logs the button number to the console. When a button is clicked, this method is called with the appropriate button number as parameter.

gistlibby LogSnag