A peculiar quirk with Nuxt.js radio buttons: they appear clickable but are somehow not disabled

I’m having an issue with a radio button that won’t check.

It seems to be working fine on other pages, but for some reason it just won't click here.

<div class="form-group">
                    <label class="control-label">Living Together Status</label>
                    <div class="radioCont">
                      <div class="form-check form-check-inline">
                        <label class="form-check-label"
                          ><input
                            id="yes"
                            v-model="properties.is_living_together"
                            class="form-check-input btn-group-toggle"
                            type="radio"
                            name="livingTogether"
                            value="1"
                            tabindex="7"
                          />Yes</label
                        >
                      </div>
                      <div class="form-check form-check-inline">
                        <label class="form-check-label"
                          ><input
                            id="no"
                            v-model="properties.is_living_together"
                            class="form-check-input btn-group-toggle"
                            type="radio"
                            name="livingTogether"
                            value="0"
                            tabindex="8"
                          />No</label
                        >
                      </div>
                    </div>
                  </div>
                </div>

Here are the properties:

properties = {
.....
employer: '',
residence_card_number: '',
// @ts-ignore
is_living_together: ''

}

Any assistance would be greatly appreciated.

typescriptvue.jsradio-buttonnuxt.js

Answer №1

The issue stemmed from the click handler in the outer div modal. Updated

<div
  id="statusConfirmModal"
  class="modal fade show"
  tabindex="-1"
  role="dialog"
  aria-labelledby="statusConfirmModal"
  @click.prevent.self="remove"
>

to

<div
  id="statusConfirmModal"
  class="modal fade show"
  tabindex="-1"
  role="dialog"
  aria-labelledby="statusConfirmModal"
  @click.self.prevent="remove"
>

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

Interface in React Typescript does not include the specified property

Just starting out with React after some previous experience with Angular. I've been trying to create a component that accepts a data model or object as a parameter. Here's what I have: import react from 'react' interface SmbListItem{ ...

reactjstypescript

What sets v-app-bar apart from v-toolbar in Vuetify?

Recently, I delved into the world of vuetify and discovered that all vuetify components are enclosed within <v-app>. In order to create a menu for my website, I came across the <v-app-bar> and <v-toolbar> elements in the documentation. ...

vue.jsvuetify.js

When attempting to import a react component written with TypeScript to npm, receiving an 'undefined' error

I recently encountered an issue when trying to publish my custom React component developed with TypeScript on npm. Although the publishing process was successful, I faced an error upon importing the npm package into a new React project: Error: Element ty ...

reactjstypescriptnpmwebpacknpm-publish

How can you correctly make an Ajax request using computed properties sourced from VueX Store?

Is there a way to make an AJAX call where one of the parameters is a computed State in VueX? For instance, if I use this.$axios.get('someUrl/' + accID ), with accID being a computed property from VueX (using MapState), sometimes it returns ' ...

javascriptvue.jsvuejs2axiosvuex

Sharing AppSettings between an Angular project and ASP.NET Core in a seamless manner

Currently, I have a project set up using the VS 2022 ASP.NET Core with Angular template. The project itself is working well, but I am facing a challenge in trying to integrate the Angular app with the .NET Core's appsettings.json file for configurati ...

c#angulartypescriptasp.net-core

Verify the length of an array within an object using JavaScript

I am facing a problem with an object. Here is what it looks like: const array = { "entities": [ { "annexes": [ { "buildingUniqueIds": [] }, { ...

javascripttypescript

Having difficulty sending string values with Axios and FormData in Vue.js

Is there a way to send both a file input and text input in a single request using Axios and FormData in Vue.js? I've come across a solution that seems straightforward: const formData = new FormData(); formData.append('file', file); formData. ...

javascriptphpvue.jsaxiosform-data

Converting JSON responses from Observables to Arrays of objects in Angular

I have created a custom interface called Table which defines the structure of my data. export interface Table { id: number; title: string; status: string; level: string; description: string; } In my service, I am using HttpClient to se ...

angulartypescript

Sorting by date and time in a data grid using MUI X is simple with these steps

In the MaterialUI X data grid, I am facing an issue with sorting a column of dates in the format of DD/MM/YYYY HH:mm:ss. Currently, the default sorting only considers the date and does not account for the time which is causing issues with the order. I was ...

reactjstypescriptmaterial-uimui-x-data-gridmui-x

How to stop a method in Angular2 when a specific response is received?

I've been grappling with the idea of unsubscribing from a method in Angular2 once it receives a specific response. settings.component.ts Within my component, the method in question is connectToBridge, where the value of this.selectedBridge is a stri ...

angulartypescriptrxjs

Bidirectional data binding in components within other components

I'm currently facing a challenge with reusing my components. My goal is to pass the data from one component as a prop to another component, but Vue throws an error regarding prop mutation. For example, I have contacts that need to be displayed in mu ...

vue.jsvuejs3

Unable to display elements from an array in the dropdown menu generated by v-for

Having just started learning Vue.js, I am facing a challenge in rendering the following array: countries: ["US", "UK", "EU" ] I want to display this array in a select menu: <select> <option disabled value="">Your Country</option& ...

javascriptvue.js

Is it possible to incorporate Vue and Vuetify into an existing project that requires IE compatibility?

Currently in the process of enhancing a legacy project with new functionality. The front end is currently relying solely on jQuery for all the webpages. I have been tasked with adding another webpage and would like to incorporate Vuetify + Vue due to the i ...

javascriptvue.jsecmascript-6babeljsvuetify.js

Develop a set of matching key/value pairs using TypeScript

Looking to develop a custom data type where InputKeys will serve as the keys, and the values will be key/value pairs. The keys should correspond to InputFieldKey, with the value being a string. My current progress includes {[key: string]: string}, but I n ...

typescript

Exploring Vue.js3: Simplifying Nested Array Filtering

Currently, I am in the process of sifting through an Array that contains nested arrays. To handle this task, I utilized computed and crafted a function called filteredEgg(). However, I seem to be overlooking something, as I'm only returning the main ...

javascriptarraysvue.jsfilter

The user's type from express-session is not being properly detected by Typescript

I have a process where I retrieve the user object from the database and set it on the express-session: export const postLogin = async ( request: Request, response: Response, next: NextFunction ): Promise<void> => { try { re ...

typescriptmongodbexpressmongoosetypegoose

What is the process for defining a global variable within a module in Typescript?

I've already included a global value in my global JavaScript context: const fs = require('fs') For a specific reason, I need to include it in the global scope. Now, I want to create a .d.ts file to declare the global variable with a stron ...

javascripttypescriptelectrontypescript-typings

What is the significance of `new?()` in TypeScript?

Here is a snippet of code I'm working with in the TypeScript playground: interface IFoo { new?(): string; } class Foo implements IFoo { new() { return 'sss'; } } I noticed that I have to include "?" in the interface met ...

genericstypescript

Tips on enlarging the header size in ion-action-sheet within the VueJS framework of Ionic

Recently I started using Vue along with the ionic framework. This is a snippet of code from my application: <ion-action-sheet :is-open="isActionSheetOpen" header="Choose Payment" mode="ios" :buttons="buttons&qu ...

javascripttypescriptvue.jsionic-frameworkvue-component

The AngularJS 2 TypeScript application has been permanently relocated

https://i.stack.imgur.com/I3RVr.png Every time I attempt to launch my application, it throws multiple errors: The first error message reads as follows: SyntaxError: class is a reserved identifier in the class thumbnail Here's the snippet of code ...

javascripttypescriptangular