Dynamic col size in Bootstrap-Vue v-for loop based on a boolean condition

Seeking assistance with Vue.js and Bootstrap integration. Trying to fetch 5 columns from an API, each with a boolean value for full-size. The desired layout should be: col-6 col-6, col-12, col-6 col-6. However, the actual outcome is col-6, col-6, col-12, col-6, col-6. Can someone provide guidance on how to achieve the correct layout?

<b-container class="h-100" v-for="block in item.block" :key="block.id">
        <b-row class="h-100 justify-content-center align-items-center text-center">
            <b-col v-if="block.fullWidth" class="col-12">
                <section class="sf-banner hero" v-bind:style="{ backgroundImage: 'url(' + block.backgroundImage.url + ')' }">
                  <h1 class="sf-banner__title">{{block.title}}</h1>
                </section>
            </b-col>
        </b-row>
        <b-row class="h-100 justify-content-center align-items-center text-center">
            <b-col class="col-6" v-if="!block.fullWidth">
                <section class="sf-banner block" v-bind:style="{ backgroundImage: 'url(' + block.backgroundImage.url + ')' }">
                  <h1 class="sf-banner__title">{{block.title}}</h1>
                </section>
            </b-col>
        </b-row>
    </b-container>
javascriptvue.jsbootstrap-4bootstrap-vue

Answer №1

Ensure that the v-for loop is applied to the columns rather than the container, then implement

:class="{'col-12': block.fullWidth, 'col-6': !block.fullWidth}"

or

:class="[block.fullWidth ? 'col-12' : 'col-6']"

Refer to the documentation: https://v2.vuejs.org/v2/guide/class-and-style.html

<b-container class="h-100">
  <b-row class="h-100 justify-content-center align-items-center text-center">
    <b-col v-for="block in item.block" :key="block.id" :class="{'col-12': block.fullWidth, 'col-6': !block.fullWidth}">
      <section class="sf-banner hero" :style="{ backgroundImage: 'url(' + block.backgroundImage.url + ')' }">
        <h1 class="sf-banner__title">{{block.title}}</h1>
      </section>
    </b-col>
  </b-row>
</b-container>

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 for attaching a modal generated in an iFrame to the main window using Javascript or JQuery when the domains are different

I'm currently working on a solution to add a modal from an iFrame into its parent container, even though they are on different domains and violating cross-origin policies. After successfully adjusting the iFrame height using postMessage() in JavaScri ...

javascriptjqueryhtmliframe

React Image Error Handling: How to deal with broken images in

I am currently working on a project where I need to retrieve the maxresdefault of various YouTube thumbnails. However, some YouTube videos do not have high-resolution thumbnail images available. To handle this scenario, I added an onError prop to the img ...

javascriptreactjsimageyoutubeonerror

The compass is currently not displaying the magnetometer values

Hello! I am currently working on a code that displays the values of the magnetometer's (x, y, z) components. Unfortunately, the issue I am facing is that the code keeps returning a "null" value continuously. You can find the link to my expo snack here ...

javascriptreactjsreact-nativeexpo

Prevent submission of form until recaptcha3 g-recaptcha-response value is obtained

SEO has a significant impact on site load speed nowadays. Adding Google reCAPTCHA3 can reduce site speed by 35-40% in Google Lighthouse results. To combat this, I chose to load the reCAPTCHA3 library only when the user clicks or fills out a form field. I i ...

javascriptlaravel

Steps for highlighting specific character(s) within a textarea

I am working on a program to search for specific characters within a designated <textarea> element. I want to be able to highlight or color the characters that match the search criteria within the text area. How can I achieve this effect and color th ...

javascriptjquerycsstextarea

Exploring the concept of variable scope with modules in Node.js

I have been searching for information on creating modules and came across some great tips, but not much is available regarding variable scope within module usage. Initially, my program was all in one document var mongodb = require('mongodb'); ...

javascriptnode.js

The Electron React app crashes due to difficulty parsing the source map

I'm a beginner in the coding world and currently working on creating an electron app using react. One of the functionalities I want to implement in the app is the ability to save user login information so that the data can be automatically fetched whe ...

javascriptnode.jsreactjselectron

What is the best way to create three buttons for selecting various parameters?

I have a code snippet where I want to assign different parameters to each button when clicked. However, despite my logic, the functionality is not working as expected. Can someone help me with the correct syntax? For example, if I click the "Start (Easy) ...

javascripthtmlbutton

The page you are trying to access does not support the HTTP request method 'GET'. Please try a different method to access the page

I have been attempting to incorporate AJAX for asynchronous communication with the server. However, I keep encountering the following error message. Any insights on how to resolve this issue? org.springframework.web.servlet.PageNotFound.handleHttpReques ...

javascriptjavajqueryajaxspring-mvc

When the page loads, should the information be transmitted in JSON format or should PHP be responsible for formatting it?

I'm considering whether it would be more server-efficient and effective to send data to the user in JSON format upon page load, with JavaScript handling the conversion into readable information. For instance, when a user visits my index page, instead ...

phpjavascriptjqueryajaxcookies

JavaScript Error - Unable to access 'getChartLayoutInterface' property of undefined in Google Charts

Recently, I came across an issue where I received a console error stating: Cannot read property 'getChartLayoutInterface' of undefined After researching similar questions, it seems that the error is due to the Google Visualization API not loadi ...

javascript

What could be causing the template UI to not display the Vue data?

As someone new to Vue, I have defined my Vue code in the following way: import Vue from "vue"; export default Vue.extend({ data: () => { message: "show message"; }, }); <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js ...

javascriptvue.js

Error: The function e(...).slick is throwing an Uncaught TypeError because it is not recognized as a

I've come across several questions related to this issue, including this one. However, none of the answers provided there have helped me resolve my problem, so I am posting a new question. My current challenge involves creating a slider with slick, b ...

javascriptphpjquerywordpressslick.js

How can I call a function in the parent component when clicking on the child component in Angular 1.5?

In my Angular 1.5 app, I have two components. The first one is the parent: angular. module('myApp'). component('myContainer', { bindings: { saySomething: '&' }, controller: ['$scope', functio ...

javascriptangularjs

Is it possible to merge elements into a carousel in the mobile display?

I have a collection of elements that I would like to combine into a swipeable carousel. Is there a way to achieve this, specifically to make it a carousel only in mobile view? If needed, here is the HTML code. Thank you for your assistance. <div class= ...

htmlcssbootstrap-4slidercarousel

When configuring a web.config file in a Vue 3 app with Vite, an issue arose where the index.html file was not being rewritten properly when

Presently, I am developing a Vue 3 application that has been deployed using Azure web apps. Initially, when I deployed it to the root directory and utilized the web.config, everything functioned correctly. However, I now need to incorporate a Base URL. To ...

vue.jsweb-configvitevue-routerazure-webapps

Leveraging v-model to connect user input with the state stored in Vuex

I'm currently working on a project that involves the following components: //store.js import modulePaciente from './paciente/modulePaciente' export default new Vuex.Store({ getters, mutations, state, actions, modules: { ...

vue.jsvuejs2vue-componentvuex

Invoking a method in a child component by clicking a button on its parent Vue component

Struggling to figure out how to trigger the toggleDetails method of postDetails from the parent component's img tag. Parent: <div v-for="post in loggedInUser.posts" :key="post._id"> <postDetails :post="post"></postDetails> ...

vue.jsvuexparent-child

What is the method for invoking forEach within an addEventListener function?

I am working with an array of objects containing names and grades of students. My task is to sort them in descending order, which I have achieved using the forEach method. However, I am struggling to figure out how to implement it within an addEventListe ...

javascriptarrays

Accessing URL parameters with Vue Router in Vue 2 Composition API

Currently, I am utilizing the Vue 2 Composition API and looking for a way to retrieve the route parameters from the Vue Router within my setup() method. As stated in the official Vue Router documentation: Due to the absence of this inside the setup func ...

vue.jsvue-routervuejs3vue-composition-apivue-router4