Utilizing TypeScript in conjunction with Vue and the property decorator to assign default values to props

Hey there!

I'm currently dealing with a property that looks like this,

but encountering a type error when trying to translate text using i18n

  @Prop({
default: function() {
  return [
    {
 >     text: this.$t('wawi_id'),
      align: 'start',
      sortable: false,
      value: 'id'
    },
    { text: 'Name', value: 'name' },
  
  ]
}
})

Here's the error message I'm seeing in typescript

 Property '$t' does not exist on type 'PropOptions<any> | Constructor | Constructor[]'.
  Property '$t' does not exist on type 'PropOptions<any>'.Vetur(2339)

Any ideas on how to resolve this issue?

typescriptvue.jsnuxt.jsvue-i18n

Answer №1

Your utilization of the this keyword is incorrect. Consider implementing the following solution:

text: this.$i18n.t("wawi_id"),

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

Utilizing a loaded variable containing data from an external API request within the useEffect() hook of a React component

Essentially, I have an API request within the useEffect() hook to fetch all "notebooks" before the page renders, allowing me to display them. useEffect(() => { getIdToken().then((idToken) => { const data = getAllNotebooks(idToken); ...

reactjstypescriptnext.jsreact-hooks

Exploring the world of Typescript class decorators and accessing its content from within

Greetings, I am searching for a method to define a class in TypeScript and retrieve its value from within the parent. abstract class Base{ fetchCollectionName(): string{ // code here to return child class attribute value } } @Collectio ...

typescript

When trying to integrate Angular.ts with Electron, an error message occurs: "SyntaxError: Cannot use import statement

Upon installing Electron on a new Angular app, I encountered an error when running electron. The app is written in TypeScript. The error message displayed was: import { enableProdMode } from '@angular/core'; ^^^^^^ SyntaxError: Cannot use impor ...

javascriptangulartypescriptelectron

Obtaining a customized variation of a class identified by a decorator

I am working with a class that is defined as follows: class Person { @OneToOne() pet: Animal; } Is there a method to obtain a transformed type that appears like this? (Including {propertyKey}Id: string to properties through the use of a decorator) ...

typescriptgenericsdecoratorreflect-metadata

The issue of resolving custom paths imports in Typescript has been a persistent challenge for developers

Currently, I am developing a project in PHP and utilizing Typescript. I aim to follow a monorepo pattern similar to what NX offers. However, I am facing challenges when attempting to compile typescript for each of my apps. Here is the current structure of ...

typescriptmonorepo

Is there a way for me to showcase the latitude and longitude retrieved from JSON data on a Google Map using modals for each search result in Vue.js?

After receiving JSON data with search results, each containing latitude and longitude coordinates, I am attempting to display markers on a Google map modal when clicking "View Map". However, the code I'm using is not producing the desired outcome. Th ...

javascriptjquerygoogle-mapsvue.jsvue-component

Different ways to separate an axios call into a distinct method with vuex and typescript

I have been working on organizing my code in Vuex actions to improve readability and efficiency. Specifically, I want to extract the axios call into its own method, but I haven't been successful so far. Below is a snippet of my code: async updateProf ...

typescriptvue.jsasync-awaitaxiosvuex

Linking a variable in typescript to a translation service

I am attempting to bind a TypeScript variable to the translate service in a similar way as binding in HTML markup, which is functioning correctly. Here's what I have attempted so far: ngOnInit() { this.customTranslateService.get("mainLayout.user ...

javascriptangulartypescriptngx-translateangular14

Incorporate a unique CSS class into the `.ck-content` element within CKEditor5 and Vue2

Is there a way to add a custom CSS class to the element .ck-content, also known as the editable formatted text container, in CKEditor5 and Vue2? https://i.sstatic.net/KG7Et.png The ck-content represents the input field, which needs to be distinguished fr ...

vue.jsvuejs2ckeditor5

Excluding certain source files in Typescript's tsconfig is a common practice to

My attempt to configure Typescript to exclude specific files during compilation is not working as expected. Despite setting exclusions in my tsconfig.json file, the code from one of the excluded files (subClassA.ts) is still being included in the compiled ...

javascripttypescripttsconfigtranspiler

Comparing Vue 3 reactivity using Provide/Inject versus accessing default slots with this. $slots.default

I am currently in the process of contributing to the PR for primefaces/primevue repository. The goal is to enable wrapping Column components within custom components for the DataTable. The PR introduces a new way for Column components to register themselve ...

vue.jsvuejs3vue-reactivityprimevue

Model binding checkbox components from an array of objects

I am developing a feature that includes Days of the Week displayed as toggleable buttons, using checkboxes: When clicked, the button should toggle between ON and OFF states (checkbox being checked) Note: The following code snippet is not functioning prop ...

vue.jsvuejs2vue-component

Updating an array using `setState` does not result in the array being updated

I created a component that uses the .map() method to render an array of students and has a button to shuffle and update the display. However, I'm facing an issue where the display does not update every time I click the button. const Home: NextPage = ...

javascriptreactjstypescript

Locate and refine the pipeline for converting all elements of an array into JSON format using Angular 2

I am currently working on implementing a search functionality using a custom pipe in Angular. The goal is to be able to search through all strings or columns in a received JSON or array of objects and update the table accordingly. Here is the code snippet ...

jsonangulartypescriptangular-pipe

Error occurs in Azure Function Linux Nodejs when trying to use @azure/storage-blob as it cannot read the property 'startsWith' of undefined

While testing my Azure Nodejs Linux function locally, I encountered this issue with the code snippet below: import { BlobServiceClient } from "@azure/storage-blob"; const connectionString = process.env[ "AZURE_STORAGE_CONNECTION_STRING&qu ...

node.jstypescriptazureazure-functionsazure-blob-storage

Select three random items from a string array list along with their corresponding indexes using TypeScript in Angular

Consider this example: I am working with a string array const groceries = [ 'milk', 'coriander', 'cucumber', 'eggplant', 'carrot', 'brinjal', 'on ...

javascriptangulartypescriptarraylist

Dynamic modal in Vue JS with custom components

Within the news.twig file {% extends 'layouts.twig' %} {% block content %} <section class="ls section_padding_bottom_110"> <div id="cart" class="container"> <cart v-bind:materials=" ...

javascriptvue.jscomponents

Add a slot to each element within Vue.js

I added a component called vue-select, which is a third-party package that I installed. My goal is to include a slot template in each instance of this component. I envision accomplishing something along the lines of: <v-select> <span slot="no-o ...

vue.js

Can you identify the type of component being passed in a Higher Order Component?

I am currently in the process of converting a protectedRoute HOC from Javascript to TypeScript while using AWS-Amplify. This higher-order component will serve as a way to secure routes that require authentication. If the user is not logged in, they will b ...

reactjstypescript

Setting a default check on a checkbox within an ngFor loop in Angular 2

I'm attempting to initialize a default value as checked for a checkbox within my ngFor loop. Here is an array of checkbox items I am working with: tags = [{ name: 'Empathetic', checked: false }, { name: 'Smart money', che ...

angulartypescriptcheckboxngforangular2-ngmodel