Display or conceal elements in a v-for select input by leveraging the value of another input with Vue3

In my form, I have two dropdown select option fields generated using loops from predefined constants. One dropdown is for selecting different "sides" and the other for choosing various "caps". When a user selects "2-Sided" in the sides dropdown, I want to disable the active item under caps by setting it to false.

<template>
...
<!-- Sides -->
<div class="mt-6">
    <h3>Sides</h3>
    <RadioGroup v-model="sides" class="mt-2">
        <RadioGroupLabel class="sr-only"> Choose Sides </RadioGroupLabel>
        <div class="grid grid-cols-3 gap-3 sm:grid-cols-4">
            <RadioGroupOption as="template" v-for="option in sideOptions" :key="option.name" :value="option" :disabled="!option.active" v-slot="{ active, checked }">
            <div :class="[option.active ? 'cursor-pointer focus:outline-none' : 'opacity-25 cursor-not-allowed', active ? 'ring-2 ring-offset-2 ring-indigo-500' : '', checked ? 'bg-indigo-600 border-transparent text-white hover:bg-indigo-700' : 'bg-white border-gray-200 text-gray-900 hover:bg-gray-50', 'border rounded-md py-3 px-3 flex items-center justify-center text-sm font-medium uppercase sm:flex-1']">
                <RadioGroupLabel as="span">
                {{ option.name }}
                </RadioGroupLabel>
            </div>
            </RadioGroupOption>
        </div>
    </RadioGroup>
</div>

<!-- Caps -->
<div class="mt-6">
    <h3>Caps</h3>
    <RadioGroup v-model="caps" class="mt-2">
        <RadioGroupLabel class="sr-only"> Choose Caps </RadioGroupLabel>
        <div class="grid grid-cols-3 gap-3 sm:grid-cols-4">
            <RadioGroupOption as="template" v-for="option in capOptions" :key="option.name" :value="option" :disabled="!option.active" v-slot="{ active, checked }">
            <div :class="[option.active ? 'cursor-pointer focus:outline-none' : 'opacity-25 cursor-not-allowed', active ? 'ring-2 ring-offset-2 ring-indigo-500' : '', checked ? 'bg-indigo-600 border-transparent text-white hover:bg-indigo-700' : 'bg-white border-gray-200 text-gray-900 hover:bg-gray-50', 'border rounded-md py-3 px-3 flex items-center justify-center text-sm font-medium uppercase sm:flex-1']">
                <RadioGroupLabel as="span">
                {{ option.name }}
                </RadioGroupLabel>
            </div>
            </RadioGroupOption>
        </div>
    </RadioGroup>
</div>

</template>

<script setup lang="ts">
...
const capOptions = [
  { name: 'No Cap', active: true },
  { name: '2-Sided', active: true },
  { name: '3-Sided', active: true },
  { name: '4-Sided', active: true },
]

const sideOptions = [
  { name: '2-Sided', active: true },
  { name: '3-Sided', active: true },
  { name: '4-Sided', active: true },
]

const caps = ref(capOptions[0])
const sides = ref(sideOptions[0])
</script>
javascriptvue.jsvuejs3

Answer №1

To enhance the functionality of the sides drop-down menu, you can attach the update/select event. By handling this event, you have the ability to iterate through the caps array and adjust the active attribute based on the selected value. It is crucial that capOptions and sideOptions share consistent names for seamless operation.

const capOptions = [
  { name: 'No Cap', active: true },
  { name: '2-Sided', active: true },
  { name: '3-Sided', active: true },
  { name: '4-Sided', active: true },
]

const sideOptions = [
 { name: '2-Sided', active: true },
 { name: '3-Sided', active: true },
 { name: '4-Sided', active: true },
]

onSideSelect(name) {
  const cap = capOptions.find(cap => 
   cap.name === name);
  cap.active = false;
}

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

JavaScript: Discovering the art of "utilizing RESTful APIs"

After several years of coding in JS, I am now expanding my knowledge. I have noticed many job postings asking for familiarity with REST APIs and experience consuming RESTful services. I have a solid grasp on AJAX basics using both vanilla JS and jQuery. I ...

javascriptjqueryajaxrest

Using Selenium to Perform Drag and Drop Operations on an SVG Object

I am attempting to drag a specific Webelement and drop it inside an SVG "container" that contains four elements, which are represented by polygons. Each polygon is labeled as g[1], g[2], and so on. Here is the HTML code of the container: <div class=&qu ...

javascriptseleniumselenium-webdrivercucumber

Utilizing Node.js within a closed intranet environment

Utilizing Nodejs's npm has proven to be quite convenient. Thus, I made the decision to incorporate it into my company's project. However, a predicament arises as my company mandates development within a closed network. This restricts my access s ...

javascriptnode.jsnpm

Emberjs Troubleshooting: Issue with Sending Many-To-Many JSON Parameters

My current versions are ember-cli 1.13.8 and ember-data 1.13.11, using ActiveModelAdapter. I am working with two objects: posts and users. On an individual post page, I have implemented an action that allows users to watch/follow the post. //post model j ...

javascriptruby-on-railsjsonember.jsember-data

Obtaining various values for checkboxes using dynamic data in a React application

Retrieve all checkbox values dynamically import * as React from "react"; import Checkbox from "@mui/material/Checkbox"; import FormControlLabel from "@mui/material/FormControlLabel"; import axios from "axios"; expor ...

javascriptreactjscheckboxaxiosstate

Are you experiencing issues with the map displaying inaccurate latitude and longitude when clicking on a specific point?

I've successfully created a simple polyline on Google Maps and attached a click event listener to it. However, I'm encountering an issue where clicking on the line provides me with latitude and longitude coordinates that point to Canada, even th ...

javascriptgoogle-mapsgoogle-maps-api-3

Having identical functions with varying IDs and the same variable in Ajax is causing issues

Here, I have two HTML rows with different IDs. When the function ItemSearch() is called, I want to display the search results for both IDs. I am new to JavaScript and AJAX. ***1st Html*** <div class="justlauchSearch"> <div class="input-gro ...

javascriptjqueryajax

Setting up route handlers in Node.js on a pre-initialized HTTP server

Is there a way to add route handlers to an http server that is already instantiated? Most routers, including express, typically need to be passed into the http.createServer() method. For instance, with express: var server = http.createServer(app); My r ...

javascriptnode.jsexpressroutes

"Step-by-step guide for incorporating a mask in the Ant Design Datepicker component in React

Could someone help me figure out how to add a mask in the antd datepicker and validate it to ensure the correct date format (dd/mm/yy)? Here is the code I have attempted: <FormItem label="Date of Birth"> {getFieldDecorator("dob", {rules: [{ require ...

javascriptregexreactjsantd

move position when clicked-javascript animation

Is there a way to create a button that changes a div's position with a 2-second transition on the first click and then returns it back on the second click? I tried implementing this code, but unfortunately, it doesn't bring the div back. va ...

javascripthtmlcss

React: Modifying a single input field out of many

Can someone please review this code snippet: https://stackblitz.com/edit/react-koqfzp?file=src/Section.js Whenever I add an item, a random number is also added that I want to be able to edit. This number is displayed in a Material UI Text Field component. ...

javascriptreactjsmaterial-ui

Monitoring Vue for ongoing HTTP requests

Upon mounting a component, it initiates 4 HTTP requests (using Axios) to fetch the necessary data. Is there a method to monitor for any outstanding HTTP requests? To simplify: Are there any pending HTTP requests? yes -> Loading=true no -> Loading ...

vue.jshttphttpsaxios

Develop a cross-platform application using webpack for both web browsers and Node.js

I'm currently developing my first module, and the code is almost identical for both browser and node.js versions. The only variance lies in the use of XmlHttpRequest for the browser and the http module for node.js. Here's a sample code snippet t ...

javascriptnode.jswebpack

Learn the process of adding files and information to FormData using vue.js

I'm having trouble adding an uploaded file and a data value to FormData in my Vue.js application. Currently, only the files request is being accessed in my controller. data() { return ( file: '', categ: '' } } Here is ...

vue.js

Connecting a Database with NestJS and TypeORM: A step-by-step guide to establish a connection with TypeORM and ensure easy access to

Could someone please explain how to create a DB instance using TypeORM? I want it to be accessible like this service, but the Connection class is deprecated. import { Inject, Injectable } from '@nestjs/common'; import { Connection, Repository } ...

javascripttypescriptpostgresqlnestjstypeorm

Abstraction of middleware functions

After reviewing my middleware Express functions, I realized that there is repeated code. The first function is as follows: const isAdmin = async (req, res, next) => { try { const requestingUser = await knex('users') ...

javascriptexpress

Find the JavaScript code that selects the previous value chosen

When working with a select in React, I am facing an issue where the console.log is returning the last value selected instead of the current one. For instance, if I select 4 followed by 3 and then 5, the code will display 1 (default value), then 4, and fin ...

javascriptreactjs

Copy password input field content in Vue to clipboard

I'm currently working on a Vue app that includes a form input for creating passwords. I've managed to implement a button that shows/hides the password, but I'm struggling with adding a copy to clipboard function. It doesn't seem to be w ...

javascriptvue.js

Connect the property of a list item to various parameters

After making an API call, I received a list of items that included student names. Now, I needed to search for a specific name within the students list and select it. For instance, the data retrieved from the API looked like this: students: [{'fullName ...

vue.jsvuejs2vuetify.js

Remove an item from an array in nuxtjs

Whenever I attempt to remove an element from an array, I encounter a peculiar issue. After making three posts and attempting to delete them, the last remaining post is often one that has already been deleted - until I refresh the page. <tr class="b ...

laravelvue.jsnuxt.js