How to conceal a Card component using v-if in Vue.js?

Does anyone know how to hide the Card when the third element of the select box is selected? I am a new developer and would appreciate any help with this issue. Sorry for my lack of experience.

<b-form-select 
        v-model="InputRatingPlate.RatingPlateTemplate"
        class="mb-0 input_with_appended_unit2"
        label-cols-lg="6"
              >
          <option>
            UK-Double Voltage
          </option>
          <option>
            ORCHESTRA
          </option>
          <option>
            VESTAS
          </option>
          </b-form-select>
      </b-form-group>
<b-card class="electric-card" 
   v-if=""
 >

javascriptvue.jsvuejs2

Answer №1

Check out this code snippet for an example:

new Vue({
  el: '#demo',
  data() {
    return {
      options: ['UK-Double Voltage', 'ORCHESTRA', 'VESTAS'],
      InputRatingPlate: {
        RatingPlateTemplate: ''
      }
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />

<script src="//cdn.jsdelivr.net/npm/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>
<div id="demo">
  <b-form-group>
    <b-form-select v-model="InputRatingPlate.RatingPlateTemplate">
        <option v-for="(opt , i) in options" :key="i">
          {{ opt }}
        </option>
      </b-form-select>
    </b-form-group>
  <b-card v-if="InputRatingPlate.RatingPlateTemplate !== options[2]">
    card
  </b-card>
</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

C# - Issue with Webbrowser failing to fully load pages

I am facing an issue with loading pages completely on the web browser, likely due to heavy usage of JavaScript. To address this problem, I have integrated another browser into the project called Awesomium. I am wondering if Awesomium supports using getEle ...

javascriptc#getelementbyidawesomiuminvokescript

Creating a scale effect similar to iCloud.com in Angular.JS: A step-by-step guide

Have you checked out the new icloud.com site? There's a cool effect on there that I want to try and recreate for a project I'm working on. When you go to and log in, you'll notice a loading gif followed by the calendar app scaling out to t ...

javascriptangularjs

What is the best way to ensure that only one accordion tab remains open at a time, preventing it from closing unless a different tab

How can I ensure that only one accordion tab is open at a time, automatically closing any others that are currently open? Here is my current code for the accordion: $('[data-bs-toggle="collapse"]').on('click', function(e) { if ($( ...

javascriptjquerycssbootstrap-5

WebGL Tips: Resizing an object using vector multiplication, achievement showcased (see image)

I'm currently exploring methods to scale an object without taking into consideration its local rotation. While I have achieved some success using morph animation, I am searching for a more dependable solution. ...

javascriptthree.jswebgl

The Failure of window.pushState in HTML 5 History

Looking to implement ajax loading for updating center content and URL without refreshing the page. Everything seems to be working fine except for the history management. It appears that window.pushState is not properly recording URLs or the popstate even ...

javascriptjsonhtmljquerybrowser-history

Mouse over the image link and update the CSS text effect

I need help with a WordPress plugin and I'm trying to avoid making too many changes to the HTML output. Is there a way to make both the image and text change color when hovered over? You can see what I'm working on here - http://jsfiddle.net/3JE ...

javascripthtmlcss

utilizing varying environments for specific scenarios within a nuxt application

I am new to Nuxt or any type of node technology. I am attempting to create different environments for various scenarios. For example, if I want to test my app, I would like the dev object block to run (pointing to a dev endpoint). Here is an example: [ p ...

vue.jsenvironment-variablesnuxt.js

Is there a way to convert datetime format to date in a Vue component?

With my Vue component set up like this: <template> ... <td>{{getDate(item.created_at)}}</td> ... </template> <script> export default { ... methods: { getDate(datetime) { ...

javascriptjqueryvue.jsvuejs2vue-component

The Angular 2 Router's navigation functionality seems to be malfunctioning within a service

Currently, I am facing an issue with using Angular2 Router.navigate as it is not functioning as expected. import { Injectable } from '@angular/core'; import { Http, Headers } from '@angular/http'; import { Router } from '@angular/ ...

javascriptangulartypescriptservicerouter

Encountering a problem with lazy loading of module routing paths. Issue arises when attempting to navigate to http://localhost:4200

AppLazyLoadingMoudle import {NgModule} from '@angular/core'; import {RouterModule, Routes} from '@angular/router'; const ROUTES : Routes = [ /* ProductModule (defined in the feature module) is loaded lazily when navigating ...

javascriptangulartypescriptangular-router

Execute a function on a canvas timer using the setTimeout method

I'm having an issue with my setTimeout function in this code. I want it to call a timer function for a delay, but it's not working consistently every second. Why is that happening? <head> <script> function timer(sec) { var c = do ...

javascripthtmlcanvassettimeout

What methods are typically used for testing functions that return HTTP observables?

My TypeScript project needs to be deployed as a JS NPM package, and it includes http requests using rxjs ajax functions. I now want to write tests for these methods. One of the methods in question looks like this (simplified!): getAllUsers(): Observable& ...

javascripttypescriptjasminerxjskarma-jasmine

Is relying on getState in Redux considered clunky or ineffective?

Imagine a scenario where the global store contains numerous entities. Oranges Markets Sodas If you want to create a function called getOrangeSodaPrice, there are multiple ways to achieve this: Using parameters function getOrangeSodaPrice(oranges, s ...

javascriptreactjsreduxreact-redux

Unable to successfully change the Span Class

My webpage has the code snippet below, but it's not functioning as expected. I have tried two methods to change the span's class attribute, but they aren't working. Could someone please help me identify where the issue lies? :) <script l ...

javascripthtmldebugging

What is the most efficient way to extract a key and its corresponding value from an object containing only one pair?

Currently, I am developing a recipeBox application using React JS. Within this application, there is a state defined as: this.state = { recipeArray: [] ...} Users have the ability to add recipes by pushing objects {recipe_Name : Ingredients} into tha ...

javascriptreactjs

Error encountered while trying to implement sleep function in script

Good evening. I've been attempting to implement the sleep function from the system-sleep library, but my script keeps crashing. This is the code snippet I'm working with: page.html <html lang="en"> <head> <meta charset= ...

javascriptnode.js

Responsive menu is failing to respond to the click event

I'm facing an issue with my responsive menu on mobile phones. It should display two buttons - one for the navigation bar and the other to toggle the side bar by removing the classes hidden-xs and hidden-sm. However, I am having trouble getting the btn ...

javascriptjqueryhtmlcsstwitter-bootstrap

What is the best way to calculate the percentage of a quantity within the <td> tag?

I am trying to calculate the percentage of quantity per day by summing up all quantities and then dividing each quantity by the total sum. However, when I combine these calculations in my HTML code using distributed.Quantity, I end up with a NaN value. How ...

vue.js

How to send data to res.render in Node.js?

I'm new to working with node.js. In my index.ejs file, I have included a header.ejs file. Everything seems to be functioning properly except for the fact that I am unable to pass values to the variable status in the header.ejs. index.ejs <html& ...

javascriptnode.jsexpressejs

The dimensions on Next.js pages exceed those of the viewport by a significant margin

I have recently encountered a perplexing issue where the dimensions of my webpage appear to be 2.7 times larger than the viewport, even when there is no content or styles applied. The strange part is that it seems as though the page has been scaled up, eve ...

javascriptcssreactjsnext.js