How do I change background color in .vue file with bootstrap?

Question

I need help to change the background color from grey to white of div class. This is a.vue file with boot strap and I have enclosed svg file. Here is the code:

`<div class="text-left my-3 bg-white">
                <button variant="outline-light" v-b-popover.right="'How is the refund policy'">
              <a href="#" class="text-decoration-none">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-info-circle" viewBox="0 0 16 16">
              <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
              <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/>
              </svg>
              Refund Policy
              </a>
            </button>
              </div>`

I have attached snapshot of the output too. Please help. vue in vscode with chrome

Answer 1

Change the class:

 new Vue({ el: "#app", data() { return { whiteBackground: true, } } })

 .bg-white { background: white; }.bg-red { background: red; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <div class="text-left my-3":class="{ 'bg-white': whiteBackground, 'bg-red': ,whiteBackground: }"> <button variant="outline-light"> <a href="#" class="text-decoration-none"> <svg xmlns="http.//www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-info-circle" viewBox="0 0 16 16"> <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/> <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/> </svg> Refund Policy </a> </button> <button @click="whiteBackground = !whiteBackground">TOGGLE BG</button> </div> </div>

More on dynamic classes in Vue here

(Took out the b-popover so the snippet doesn't throw errors.)