Can I utilize @click (v-on:click) to open a modal and at the same time close another modal that is currently open?

I need to close two modals named confirmationModal and showModal. I've tried using the on click event, as well as writing an if/else method, but so far nothing seems to do the job.

    <div v-if="showModal">
      <transition name="modal">
        <div class="modal-mask">
          <div class="modal-wrapper">
            <div class="modal-dialog">
              <div class="modal-content">
                <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true" @click="showModal = false">&times;</span>
                  </button>
                </div>
                <div class="modal-body">
                <div class="modal_header_text">Are you Sure?</div>
                <img class="redeem_image" src="https://www.fillmurray.com/g/460/420" alt="people"/>
                <div class="modal_redeem_text">Redeem for Flyaway?</div>
                </div>
                <div class="modal-footer">
                  <button type="button" id="reclamation_btn" class="btn btn-primary" @click="confirmationModal = true">Redeem</button>
                  <button type="button" id="close_btn" class="btn btn-secondary" @click="showModal = false">Cancel</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </transition>
    </div>
    <div v-if="confirmationModal">
      <transition name="modal">
        <div class="modal-mask">
          <div class="modal-wrapper">
            <div class="modal-dialog">
              <div class="modal-content">
                <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true" @click="confirmationModal = false">&times;</span>
                  </button>
                </div>
                <div class="modal-body">
                <img class="redeem_image" src="https://www.fillmurray.com/g/460/420" alt="people"/>
                </div>
                <div class="modal-footer">
                  <button type="button" id="final_reclamation_btn" class="btn btn-primary" @click="confirmationModal = false">Redeem</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </transition>
    </div>
  </div>
javascriptvue.jsevent-handling

Answer №1

Here's how you can make it happen:

@click="confirmationModal=false;showModal=true"

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

Mongoose failing to persist subdocument

After trying to insert into my collection, I noticed that the sub-document is not being saved along with it. This issue has left me puzzled. This is the scheme/model I am working with: import { Schema, Document, Model, model } from 'mongoose' ...

javascriptmongodbtypescriptmongooseinsert

Troubleshooting angular radio input display issue caused by controller updates

When the page loads, my AngularJS controller.js initializes the scope model by fetching data from an AJAX response: services.InitializePage().then(function (response) { $scope.DataModel = response.data; Shortly after that, the model undergoes ...

javascriptangularjs

iOS Facebook SDK Login

I'm facing an issue with logging in to my website using the Facebook JS API on my iPhone. The login process works smoothly on a computer and iPad, but I encounter a problem on my iPhone. When attempting to log in on my iPhone, I am directed to a scre ...

javascriptiphonefacebook-javascript-sdk

Deleting a sentence from a text document

Is there a way to remove a row from a text file without leaving empty lines? See the Example and Example2. Consider this scenario: Hello Hello2 String After deletion, the file should look like this: Hello Hello2 I attempted the following code but it re ...

javascriptnode.js

Is nesting directives possible within AngularJS?

Having trouble creating a Directive that includes another directive from the AngularJS UI. Check out my html: <div class="col-md-12" ng-show="continent == '2'"> <my-rating></my-rating> </div> Here is the directiv ...

javascriptangularjsusing-directives

Can the value of an object parameter be inserted dynamically?

I've been racking my brain over this, but so far I haven't found a solution that fits my exact issue. My query is about the feasibility of entering a value for an object parameter from an input box dynamically? For instance: <form name= ...

javascripthtml

Using Plupload plugin to handle file uploads triggers unexpected page refresh when making Ajax requests

I have implemented the Plupload plugin to facilitate the uploading of multiple files. I have linked the FileUploaded event to the uploader in order to execute additional actions once a file has been uploaded. Below is where I am attaching the event. uploa ...

javascriptjqueryajaxplupload

Error: Trying to access a property that is undefined (specifically referencing 'rendered') has resulted in an uncaught TypeError

As a newcomer to React, I'm attempting to create a headless WordPress application. However, when I fetch a post, I only receive the first value. After fetching the post, I save it in the state: componentDidMount() { this.setState({ lo ...

javascriptreactjswordpress-rest-apiheadless-cms

JavaScript proxy feature: combining notifications after sorting an array

Seeking a solution to receive only one notification after sorting an array. Is there a method that accomplishes this? Thank you! const callback = function () { console.log (...arguments) } const array = [2,1] const handler = { set (target, prop, value ...

javascriptarraysmethodsinterceptores6-proxy

What is the simplest method for fetching and parsing JSON data with jQuery and JavaScript?

I'm having trouble making this code snippet work. I can't seem to figure it out. The objective is to retrieve and parse a JSON object in the simplest and easiest way possible. Here's the code snippet. <!DOCTYPE html> <html> &l ...

javascriptjqueryhtmljsonajax

Creating dependent dropdowns using Laravel Inertia Vue: A step-by-step guide

In my AddressController, I have a function called loadCity along with other CRUD functions: public function loadCities(Request $request) { $provinceId = $request->province_id; $cities = Province::where('province_id' ...

javascriptlaravelvue.jsinertiajs

Argument for setInterval function

As a newcomer to programming, I am attempting to develop a basic javascript game. I have encountered an issue with the window.setInterval function and it seems to be causing everything to malfunction. I have been following a tutorial at this link and att ...

javascripttwitter-bootstrap

In need of changing the date format post splitting

I need help converting a date from MM/DD/YY to YYYYMMDD The current code I have is giving me an incorrect output of 2211. How can I implement a check on the Month and Day values to add a leading zero when necessary? var arr = '1/1/22'; arr = NTE ...

javascript

Is there a way to convert a method for computed properties into GETTER and SETTER functions?

I am just starting to learn about Vuex and decorators. I am currently working on a search bar that filters characters based on user input. <input class="form-control" type="text" v-model="searchPhrase" placeholder ...

vue.jsvuexcomputed-propertiesvuex-modules

React JS project experiencing issues with Material UI components not functioning properly

Here is a unique version of my app.js code: import React from "react"; import './App.css'; import {Button} from "@mui/material"; function App() { return ( <div className="App"> <h1>COVID-19 T ...

javascriptreactjsmaterial-uiweb-development-server

Cropped portion of the captcha image located on the left side

edit: I manually adjusted cnv.width = this.width to 120 and it seems to be working. Upon closer inspection, I discovered that the image has both a rendered size and an intrinsic size. The width is 35 for rendered size and 40 for intrinsic size, which may e ...

javascriptseleniumcaptcha

What is the best method for eliminating an element from an array when a specific key is

Essentially, the dataSource for the kendo grid has a default data called selVal. If any key from selval matches with dtoVal, I want to delete everything from selVa. Is it possible to implement this with the code below? It's not deleting selVal element ...

javascriptangularjs

retrieve the returned data to be shown within the Vue model

I am struggling to display a simple set of data in my Vue model that is received from a method. I have tried adding the data to my object or array, but nothing seems to work. Typically, just using vm.array name or object name should work on success, but I ...

vue.js

Utilizing Jquery.validate() for personalized checkbox validation

My struggle lies in integrating jQuery.validate() with custom-designed checkboxes. I am unable to achieve the desired outcome where, upon clicking SUBMIT without selecting any checkboxes, an error should be displayed in the respective label. Despite having ...

javascriptjquerycsscheckboxjquery-validate

Replicate and $(document).ready()

My form has required fields that need to be completed. To alert users about blank fields, I have implemented the following code: $(document).ready(function() { $('input.required:text').focus(function() { $(this).css({'background ...

javascriptjquerycss