Implementing class binding for type settings in Vue using TypeScript

I am working with Vue3 (vite) Single File Components, and here is a snippet of my code:

<button :class="{'button__active': checked === '1'}">1</button>
<button :class="{'button__active': checked === '2'}">2</button>

However, I encountered an error message in TypeScript:

Type '{ button__active: boolean; }' is not assignable to type 'string | boolean | undefined'。ts(2322)

I am unsure how to resolve this issue in TypeScript. Can TypeScript be configured to skip this check? Any suggestions would be appreciated. Thanks!

typescriptvue.js

Answer â„–1

Perhaps a slight alteration to the format could provide a solution?

<button :class="{selected === '1' ? 'button__active': ''}">1</button>
<button :class="{selected === '2' ? 'button__active': ''}">2</button>

Answer â„–2

It seems to be functioning fine as I tested it with the code snippet and encountered no warnings or errors.

new Vue({
  el: '#app',
  data: {
    checked: '1'
  }
})
.button__active {
  background-color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typescript/4.8.0-beta/typescript.min.js"></script>
<div id="app">
  <button :class="{'button__active': checked === '1'}">1</button>
  <button :class="{'button__active': checked === '2'}">2</button>
</div>

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

Tips on updating an object in Angular 2/4 without losing the reference

Here's my scenario: I have two instances, originalMember and toSaveMember, both belonging to the same class called Person. How can I update all the values from toSaveMember to originalMember, while still retaining the original reference of originalMem ...

angulartypescriptfrontend

Linking a user's input to a specific element within an array

Can someone assist me in displaying the contents of an array based on a specific id input? I attempted to use v-model but couldn't figure out a solution. For instance, when I input 123, I want to see item1 displayed and when I input 321, I expect to ...

typescriptvue.js

Tips for utilizing a 'v-for' directive with objects within a blade element in Vue.js

I am currently working on a code that includes a loop within which there is an <a> tag. I aim to generate the link for this tag using a server-side code function. An excerpt from my code is as follows: <div v-for="file in file ...

vue.jsrazor

The dimensions of my grid object are constantly being altered by my interactive button

Recently, I started delving into vuejs and vuetify to work on a project management app for school. I encountered a simple problem where adding a button distorted the project bar. I tried nesting the button component within the project bar to rectify this i ...

htmlvue.jsvuetify.js

Utilizing TypeScript to Retrieve the Parameter Types of a Method within a Composition Class

Greetings to the TS community! Let's delve into a fascinating problem. Envision having a composition interface structured like this: type IWorker = { serviceTask: IServiceTask, serviceSomethingElse: IServiceColorPicker } type IServiceTask = { ...

node.jstypescripttypestypescript-generics

steps for setting up firestore database

Hey there, I'm trying to retrieve data from Firestore within a cloud function. To initialize Firebase, I have a file called firebase.ts: import * as admin from "firebase-admin"; import { getFirestore } from "firebase-admin/firestore&quo ...

angulartypescriptfirebasegoogle-cloud-firestoregoogle-cloud-functions

Issue with modal component triggering unexpected page reload

I'm encountering a strange issue with my modal in Vue.js. It only appears on a specific page named 'Item', but when I click on a different view, the page reloads unexpectedly. This problem seems to occur only with the route containing the mo ...

javascriptvue.js

Underscore Typing in the Style of Scala

Just for kicks, I started tinkering with creating a Scala-inspired underscore in typescript. I aim to simplify writing code by replacing .map(x => x.myProp) with just .map(_.myProp). The logic behind this is quite simple using Proxies, but the challenge ...

typescripttypescript-generics

Dragging the map using the Leaflet-side-by-side plugin in Vue2leaflet was not functioning as intended

Exploring the usage of leaflet-side-by-side plugin within Vue2Leaflet. mounted() { this.$nextTick(() => { this.map = this.$refs.myMap.mapObject; this.layer1 = this.$refs.leftLayer.mapObject; this.layer2 = this.$refs.rightLayer.m ...

vue.jsleaflet

What is the best way to provide props to a Link Router component?

Hey there, I'm looking to pass props to another component using Link Router My approach involves using a Class Component constructor(props: IBanner) { super(props); this.state = { jobCategories: [], jobKeyword: "", ...

reactjstypescriptreact-router

Loop through a collection of unique identifiers for documents and establish event listeners in Firestore

Within my Vuex store, there is an action designed to retrieve a list of uids for followed users from the current user's Firestore UserDataCollection document. The action then processes each uid to extract data that will be displayed on the UI. While t ...

javascriptfirebasevue.jsgoogle-cloud-firestorevuex

Converting JSON into Typescript class within an Angular application

As I work on my app using angular and typescript, everything is coming together smoothly except for one persistent issue. I have entity/model classes that I want to pass around in the app, with data sourced from JSON through $resource calls. Here's ...

javascriptangularjsjsontypescriptangular-resource

What is the functionality of angular-cli@webpack?

After working with angular-cli using systemJS, I have become comfortable with the build process, test cases, and component interaction. Recently, I made the switch from angular-cli to angular-cli@webpack. However, I am now facing confusion on a few point ...

angulartypescriptwebpack

What could be causing my array to be undefined upon the creation of a Vue component?

I'm struggling to comprehend why my array is showing as undefined in my Vue component. The issue arises in the following scenario: The SelectCategories.vue component uses the router to navigate to the Quiz.vue component. Here, I utilize props to tran ...

javascriptvue.jsvue-component

AWS Amplify-hosted Nuxt applications are resilient to errors during the build process

My website is built using Nuxt js and hosted on AWS Amplify. I've encountered a major issue where the website still gets generated successfully even when there's a failure in the nuxt generate command (like a JavaScript error in my code). Below i ...

javascriptamazon-web-servicesvue.jsnuxt.jsaws-amplify

How can I reference MyClass.new as a method in Typescript?

Within my code, I have an array of objects and each object is structured like this: { id: 'string', name: 'string' } There's a class defined as follows: class User { constructor(obj: Record<string, string>) { Object.as ...

javascripttypescript

What is the best approach to inheriting from an Injectable class with multiple Injections in Angular 2?

Could we potentially achieve something similar to this code snippet? I attempted it but didn't have any success: @Injectable() class X { constructor(private http: Http){ // <-- Injection in parent class } method(){ this.http.get()... ...

angulartypescriptdependency-injectioninjectinjectable

Having trouble generating a Vue project using vue/cli?

I am currently developing a vuex application using Vue CLI. Unfortunately, the CLI gets stuck during metadata fetching (<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="eb88838480828f8a99abd9c5dac5dd">[email protected]</a& ...

node.jsvue.jsnpmvue-cli-3npm-scripts

Is Angular capable of determining which module to load for the frontend, or does it always need to load the entire application with all modules?

Is it possible for Angular 2 to selectively load specific modules for the frontend, or does it always have to load the entire application with all modules included? ...

angulartypescriptroutescomponents

"Encountered a problem while attempting to download the .xlsx file through http.get in an angular application interfacing

Attempting to download a .xlsx file using Angular 7 and web API in C#, encountering the following error: https://i.sstatic.net/7pwDl.png The code snippet from my service.ts is provided below: public exportExcelFile(matchedRows: string, reportInfoId: num ...

c#angulartypescriptasp.net-web-api