Using the Vue Class Component syntax in conjunction with TypeScript

I found an example on https://github.com/vuejs/vue-class-component that uses the new component syntax in vuejs3, but I'm trying to use TypeScript directly instead of babel. Here is what I attempted:

<script lang="ts">
import Vue from "vue"
import Component from "vue-class-component"

@Component({
    props: {
        propMessage: String
    }
})
export default class MyComponent extends Vue {
    helloMsg = "Hello, " + this.propMessage

}
</script>

Unfortunately, it seems like this.propMessage cannot be found. Can anyone suggest how I should update the syntax to access it correctly?

Answer №1

One possibility is to try utilizing this.props.propMessage (though unable to verify at the moment) in case you haven't already attempted it.

You might consider incorporating the @Prop decorator from vue-property-decorator, as it offers a more streamlined syntax in longer scenarios.

An example would look like this:

@Component
export default class MyComponent extends Vue {
    @Prop() propMessage !: string;

    helloMsg = "Hello, " + this.propMessage;
}

Wishing you the best of luck!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Refreshing the page or directly loading it results in a blank screen being displayed

Despite researching various solutions to this common issue, none seem to work for me. Let's dive into it. I've developed a Vue 2 application integrated with Express running on AWS Amplify. When testing the app locally in 'dev' mode (np ...

What is the process for invoking a Java function in Android from JavaScript when using Vue?

My project is developed using Vue.js. In order to view it on a mobile phone, I decided to create an Android app. To achieve this, I am using the WebView component. However, when I click on an element in the Vue.js app, JavaScript calls Java and some events ...

VueJS displays an error message stating: "Component '<IncomeList>' is not recognized - have you properly registered the component?"

As a junior student, I attempted to create a simple exercise using the income-tracker tutorial at https://www.youtube.com/watch?v=AjV7k7t78Ik, but encountered an error that I'm struggling to resolve. [Vue warn]: Unknown custom element: <IncomeList ...

Changing the way users are linked in a post using HTML tags (VUE-NODE)

I am trying to modify a body property that includes usernames @username1 and @username2. Is it feasible to use regex to transform these nicknames into router links? The desired output should be like this (with the @ removed in the link profile) <router ...

What is the best way to access a variable from a .js file?

Is there a way to access a variable defined in a JavaScript file from a Vue file and pass it to the Vue file? In the following code snippet, there is a template.js file and a contact.vue file. The template file converts MJML to HTML and saves the output to ...

The correct way to integrate CSS-Modules into your Nuxt project

Currently, I am utilizing CSS Modules with Nuxt and have encountered some challenges while attempting to import a stylesheet into my JavaScript. Importing the stylesheet directly within the... <style module> @import './index.css'; </s ...

`How can I customize the appearance of individual selected <v-list-item> across various sub-groups?`

As a newcomer to Vuetify and Vue in general, I am struggling to solve a specific issue. I need to create multiple sub-groups where only one option can be selected within each "parent" list. Consider an array of cats: options:["Crookshanks", "Garfield", " ...

Vue.js enhances user input interactions

CSS <span :style="{ display : displayTitle }" @click="toggleInput()"> {{ text }} </span> <input v-if="isEditing" type="text" v-model="text" @blur="hideInput" @keydown.enter="saveChanges" @keydown.esc="cancelE ...

The proper method for utilizing the clipped prop on the <v-navigation-bar/> component within Vuetify is as follows

Looking for the correct way to apply the clipped prop to <v-navigation-draw/> in a Vuetify application in order to ensure that the navigation drawer sits below the app-bar. Here is what I have tried so far. Started with a new project: $ vue create ...

Looking to filter JSON data with Vuejs?

I am trying to search through this JSON array for a specific key: track_order The data I receive from the server is stored in the orders variable: "records": [ { "phone": "09********8", "fullName": "******", ...

Utilize the @blur event within flatpickr to trigger actions when the output is empty

<b-col md="7" offset-md="1"> <b-form-group> <template> Date and Time <flat-pickr id="datetime" v-model="datetime" class="form-control" ...

What is the best way to populate a Vue form with pre-existing data?

Currently, I am utilizing Vue form to edit a single item. However, I am struggling to determine the correct method for assigning values to categoryName and description in order to display those values within the form. I have attempted to retrieve the valu ...

How can components be utilized with v-edit-dialog?

Hey there, I've been exploring the v-edit-dialog component offered by Vuetify and had a query about its implementation. Currently, I'm structuring my v-data-table in a way where I'm importing a component with props into a template slot. The ...

Inject SCSS variables into Typescript in Vue 2 Using Vue-cli 5

When working on my Vue 2 project (created using the Vue-cli v4), I successfully imported variables from my SCSS file into my typescript (.vue files) without any issues. I had the :export { ... } in my SCSS file _variables.scss, along with shims.scss.d.ts ...

Tips for postponing the first button event in Vue 3 and JavaScript

My current task involves setting up a button event in Vue 3 that triggers a setTimeout countdown on the button before redirecting to another page. The event function has a conditional statement that initiates a countdown from 5 to 0 as long as the countVal ...

What seems to be the issue with the data initialization function not functioning properly within this Vue component?

In my Vue 3 component, the script code is as follows: <script> /* eslint-disable */ export default { name: "BarExample", data: dataInitialisation, methods: { updateChart, } }; function dataInitialisation() { return { c ...

Vue 3 Single Page Application. When selecting, it emits the language and the contentStore does not update the content exclusively on mobile devices

My Vue 3 Single Page Application is built on Vite 4.2 and TypeScript 5.02. When I click to select a language, it emits lang.value and in the parent component App.vue, contentStore should update the content. It works flawlessly on my Linux Ubuntu desktop i ...

Comparing "const" and "Vue.component": Understanding the Distinctions

I am new to the world of Vue framework and finding myself struggling with the basics. Currently, I am facing a challenge in creating reusable components. My current approach to creating these components is as follows: Vue.component('SomeReusableComp ...

One effective method for implementing two-way data binding with Vuex within a list

https://i.stack.imgur.com/xO2MO.png I have a collection of items stored in a Vuex state. The issue arises when I select items from the main state and update it using v-on:change, as well as from the sidebar. However, upon toggling down with v-on:change on ...

Adding query parameters dynamically in Vue without refreshing the component

I'm attempting to update the Query Parameters in Vue without refreshing the component using Vue-Router. However, when I use the code below, it forces a component reload: this.$router.replace({query: this.filters}); Is there a way to prevent the comp ...