How to target an element in the DOM using Vue.js when a different element is clicked | Vue.js

The issue I've been struggling with involves displaying only one button in a row when clicked within a datatable. [Check out image 1](https://i.sstatic.net/N7JH2.png)

Specifically, I need the input of that row to be opened when the + or - button is clicked. [See image 2](https://i.sstatic.net/ppj4X.png)

I've found that using v-if with a generic is_visible class set to true causes all inputs in the table to open simultaneously.

What is the correct method for achieving this? In Jquery, I was able to accomplish the same result by using $this for the selected button.

javascriptvue.jsclickthisshow

Answer №1

When the button is clicked, I want the input of that specific row to be displayed. See below for the concise code snippet

<td class=" p-2 d-flex">
                            <v-btn
                                class="mx-2"
                                fab
                                dark
                                small
                                color="primary"
                                @click="showTextField()"
                            >
                                <v-icon dark>
                                    mdi-plus
                                </v-icon>
                            </v-btn>
                            <v-btn
                                @click="showTextField()"
                                class="mx-2"
                                fab
                                dark
                                small
                                color="primary"
                            >
                                <v-icon dark>
                                    mdi-minus
                                </v-icon>
                            </v-btn>


                                <v-text-field
                                    class="mr-2 d-none"
                                    label="Quantity"
                                    type="number"
                                    required>
                                </v-text-field>

   </td>

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 obtaining checkbox value in an AJAX request

I need to retrieve the value of a checkbox using Ajax in order to store it as a user preference in the database. This task is new to me, and I'm feeling a bit overwhelmed. Here is my JavaScript file: $(document).ready(function() { E.accounts.chang ...

javascriptjqueryruby-on-railsajaxhttp

Tips for updating the border color of a button:

Struggling to alter the border color of a button Attempting borderColor attribute proved futile: borderColor: '#FFFFFF' Anticipated result Code snippet: headerBtn: { backgroundColor: 'black', fontSize: '16px', f ...

javascriptbuttonnext.jscolorsborder

Tips for adding two values simultaneously to an array in JavaScript

I am having trouble inserting two values into an array during each loop iteration. Here is the code I have tried: feature_arr = []; $form.find( '.variations .value' ).each( function() { var $radios = $( this ).fi ...

javascriptjqueryarrays

displaying the description of a Wordpress category

How can I display the Wordpress category description and name separately in two different locations? I want to show just the description without including the category name or slug. Currently, I have been using the following code snippet to display only t ...

javascripthtmlwordpress

I have discovered some amazing jQuery image hover effects that are simply breathtaking –

I have been using the Adipoli jQuery Image Hover Effects plugin, but I am facing issues with changing certain properties. The image is set to change to grayscale initially and then switch to color on hover. However, when I click on the image, it should mai ...

javascriptjqueryimage

What is the best way to showcase the output of a Perl script on a webpage

I recently came across a resource discussing the process of executing a perl script from a webpage. What is the best way to run a perl script from a webpage? However, I am facing a situation where the script I have takes more than 30 seconds to run and d ...

javascripthtmlajaxperl

Angular 15 experiences trouble with child components sending strings to parent components

I am facing a challenge with my child component (filters.component.ts) as I attempt to emit a string to the parent component. Previously, I successfully achieved this with another component, but Angular seems to be hesitant when implementing an *ngFor loop ...

javascriptangulartypescriptngforeventemitter

Vue js for filtering and replacing prohibited words

For this scenario, our objective is to screen the words in our input: <input type="text" class="form-control" placeholder="Write something..." v-model="todoInput""> Below are the restricted words that we aim to substitute in the input "restrict ...

javascriptvue.jsvuejs2

Creating dynamic controls in edit template of KendoUI ListView at runtime

Linked to this inquiry, I am interested in replicating the same functionality within a ListView rather than a kendo Grid. My attempt can be viewed here. The editing template switches between different controls based on the initial model value during edit m ...

javascriptjquerykendo-uikendo-listview

What's the best way to add a Grid to a TabPanel in React without triggering any pesky warnings?

I have a question that should be clear from the context. I'm currently working with Tabs from Material-UI to display different Grids based on the user's selection. Each panel is supposed to contain a Grid with various text fields and components. ...

javascriptreactjsreact-nativematerial-ui

JavaScript regex for the 'hh:mm tt' time format

I need to validate time in the format 'hh:mm tt'. Here is an example of what needs to be matched: 01:00 am 01:10 Pm 02:20 PM This is what I have tried so far: /^\d{2}:\d{2}:\s[a-z]$/.test('02:02 am') ...

javascriptregex

Identify whether the application is built with nextJS, react, or react-native

I'm currently developing a library for React applications and I anticipate that certain features will function differently depending on the environment. I am seeking a method to identify whether the current environment is a ReactJS application (creat ...

javascriptreactjsreact-nativenext.js

Encountering an ongoing problem with trial repetition in JsPsych, which is causing the looping to continue endlessly without

As a beginner in JsPsych, I'm diving into creating a basic math quiz task to sharpen my skills. The goal is to generate random math questions as prompts and stop the task after 10 correct answers. I've managed to code that selects random math pro ...

javascriptjspsych

Occasionally, the Array.filter() method might strip away every element within the array

This situation is really frustrating me. The goal is to have the newArray return all elements except the one where the two ids match, as specified in the code. However, when I add objects to the array and then try to remove them one by one, the results are ...

javascriptarraysreactjs

Error: The variable 'err' is undefined in the mongoose mongodb code

Every time I try to execute this code, an error pops up stating that err is undefined Below is the code snippet causing the issue: app.post('/tinder/cards', (req, res) => { const dbCard = req.body; Cards.create(dbCard, (err, data) => { ...

javascriptdatabasemongodbmongooseerror-handling

Unable to access webpack-stats.json. Please verify that webpack has created the file and the path is accurate

After setting up django with Vue, I encountered a runtime error: Error reading webpack-stats.json. Have you ensured that webpack has generated the file and the path is accurate? https://i.stack.imgur.com/jfeET.jpg Next to manage.py, the following command ...

djangovue.jsnpmwebpackvuejs3

Guide to retrieving PDFs and images from a Spring Application as an API response and manipulating the data using JS/React

For my current project, I am working on a Spring Boot and React application where I need to create an API that takes the file name as input and returns the file content in Java/Spring Boot. The goal is to display the content in a new browser tab. Below is ...

javascriptjavareactjsspringspring-boot

Error encountered while attempting to compile transcluded directives during unit testing with Angular version 1.3.0

I am facing an issue with a custom directive having transclude: true property. The directive contains a template pointing to a simple HTML file with an anchor element having an ng-transclude attribute. The anchor element wraps the content of the directive. ...

javascriptangularjsunit-testingjasmine

What is the best way to add custom styles to an Ext JS 'tabpanel' xtype using the 'style

Is there a way to change the style of a Ext.tab.Panel element using inline CSS structure like how it's done for a xtype: button element? { xtype: "button", itemId: "imageUploadButton1", text: "Uploader", style: { background : ' ...

javascriptcssjsonextjs

What is the best way to combine two objects by summing up the numerical values of matching keys?

I am currently working with 2 objects and using the jQuery extend function. However, I am facing an issue where values from keys with the same name are being overridden. How can I combine or add these values together instead? var obj1 = { "orange": 2, ...

javascriptjquery