Creating responsive design with multiple conditions in Vuetify/VueJS for different screen sizes of medium, large

I'm having difficulty setting conditions for breakpoints in Vue/Vuetify

Essentially, I want to specify that if the array's length is divisible by 2, then the MD value should be 6, and if it's divisible by 3, then MD should be 12

<v-col cols="12"
    :md="module.plannings.length % 2 === 0 ? 6 : module.plannings.length % 3 === 0 ? 12 : 12"
    v-for="planning in module.plannings"
    :key="planning.id"
>

I seem to be approaching this incorrectly... what would be the proper syntax to achieve this?

javascriptvue.jsvuejs2vuetify.js

Answer №1

You have the option to create a computed property:

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data() {
    return {
      module: {id: 0, plannings: [0,1,2,3,4,5]}
    }
  },
  computed: {
    msize() {
      return this.module.plannings.length % 2 === 0 ? 
        6 : this.module.plannings.length % 3 === 0 ? 
        12 : 12
    }
  }
})
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<div id="app">
  <v-app>
    <v-main>
      <v-container>
        <v-col cols="12"
            :md="msize"
            v-for="planning in module.plannings"
            :key="planning.id"
        >
        {{planning}}
        </v-col>
      </v-container>
    </v-main>
  </v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>

Answer №2

To ensure correct syntax, use the following code: 

:md="plannings.length % 2 === 0 ? 6 : 12"

Here is a sample demonstration:

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    plannings: [{
      id: 1
    }, {
      id: 2
    }]
   }),
});
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="780e0d1d384a5600">[email protected]</a>/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e5939080918c839ca5d7cb9d">[email protected]</a>/dist/vuetify.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f4828191809d928db4c6da8c">[email protected]</a>/dist/vuetify.min.css"/>
<div id="app">
  <v-row>
    <v-col
           :md="plannings.length % 2 === 0 ? 6 : 12"
           v-for="planning in plannings"
           :key="planning.id"
           style="background-color: yellow"
           >
           {{ planning.id }}
    </v-col>
  </v-row>
</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

Tips for customizing the Link component in ReactJS to display innerHTML

After researching various methods for extending a React component through inheritance, I discovered that most examples focused on adding events rather than manipulating the innerHtml. This led me to ponder a simpler approach: // React packages import Reac ...

javascripthtmlreactjs

Exploring the World of Unit Testing with Jasmine and Sinon Factories

At my factory, I have implemented a getter and setter function .factory('myService', function() { var car = null; return { car: car, get: function get() { return car; }, set: function set(newCar) { car = newCar; ...

javascriptangularjsjasminesinon

Encountering the "Whitelabel Error Page" while integrating VueJs with Spring Boot

Currently developing a web app using VueJs for the front end and Spring Boot for the back end. While working on it, I have been running each part independently and everything functions as expected. However, when it comes to deploying the app, I am facing a ...

spring-bootvue.js

What exactly is the functionality of the third parameter (usually next()) behind the scenes in ExpressJS once it is hidden behind the abstraction layer?

Consider this scenario: in the following two code snippets, how is the next() function used as a parameter and how does it facilitate the automatic transition to the next middleware function? What is the underlying mechanism that enables this abstraction? ...

javascriptnode.jsexpress

Guide to establishing a connection to the Companies House API: Essential guidelines on setting up cURL headers and requisite API key specifications

I am attempting to establish a connection with the UK Companies House API, preferably using JavaScript. However, I am currently trying to set up this PHP version. How can I obtain access to the API using an API key? PHP: public function GetCompanyHouse( ...

javascriptphpapicurl

Encountering net::ERR_CONNECTION_RESET and experiencing issues with fetching data when attempting to send a post request

I am facing a React.js task that involves sending a POST request to the server. I need to trigger this POST request when a user clicks on the submit button. However, I keep encountering two specific errors: App.js:19 POST http://localhost:3001/ net::ERR_CO ...

javascriptnode.jsreactjsexpressreact-hooks

Are current web browsers able to block the code "<a href="javascript:window.open....?

I am looking to create a pop-up window for sharing on Facebook. The best way to achieve this is by using javascript to pop up a small window with a width of 400 pixels and a height of 200 pixels. Will pop-up blockers in Chrome, IE, or Google block this f ...

javascripthtmlcssbrowser

Updating REST API: Sending a PUT request without requiring all data to be included in json format

I have a controller set up for updating user data. The controller can accept up to 4 values. I am wondering if it is possible to only update the name field when sending data to this route, leaving the rest of the fields unchanged (and not empty). Should ...

javascriptnode.jsexpress

Having trouble getting the jQuery/JS redirect button to function properly

I'm fairly new to working with jQuery. My current challenge involves unsetting a cookie and then navigating to the next page. There are numerous resources discussing this topic online, but what seemed like a simple task has turned into a two-hour hea ...

javascriptjqueryhttp-redirect

Angular.js: how to filter an ng-repeat by a missing key/value pair

How can I filter the ng-repeat to only display rows where all key/value pairs are present? HTML <div ng-app="myApp" ng-controller="oneController"> <table class="table table-bordered table-hover"> <thead> <tr> <th> ...

javascriptangularjsfilteringangularjs-ng-repeat

Tips for transferring a boolean value to a generic parameter in Java?

Looking to pass a boolean value to the Generic type in order to be utilized within a condition. This is the generic type interface OptionTypeBase { [key: string]: any; } type OptionsType<OptionType extends OptionTypeBase> = ReadonlyArray<Opt ...

javascriptreactjstypescriptgenericstypes

Utilize fixed values in type declaration

Strange Behavior of Typescript: export type MyType = 0 | 1 | 2; The above code snippet functions correctly. However, the following code snippet encounters an issue: export const ONE = 1; export const TWO = 2; export const THREE = 3; export type MyType = O ...

javascripttypescripttypesconstants

How can Components access variables declared in a custom Vue.js plugin?

I had developed a unique Vue js plugin to manage global variables as shown below: CustomConstants.js file: import Vue from 'vue' export default { install(Vue){ Vue.CustomConstants = { APP_VERSION: '2.1.0' ...

javascriptvue.js

Having trouble configuring AJAX and PHP to work together

Here's the situation I'm dealing with: I have HTML, JS, and PHP files. In the PHP file, there is an associative array containing default values to populate form elements in the HTML file. I'm trying to use AJAX to retrieve data from the PHP ...

javascriptphpjqueryhtmlajax

Exploring the features of Three.js: materials and shadows

I cannot figure out why the mesh material I chose is causing issues. As you can see in the image: https://i.sstatic.net/4nijf.png The black objects look fine, with smooth and correct shadows. However, the white objects appear strange and the shadows, in m ...

javascriptcanvasthree.js

Cut off all information beyond null characters (0x00) in Internet Explorer AJAX responses

When using Internet Explorer (IE6, IE7, and IE8), null characters ("0x00") and any subsequent characters get removed from ajax responses. Here's the code snippet that showcases a loop of AJAX requests: var pages = 10; var nextnoteid = 0; for (isub ...

javascriptjqueryajaxinternet-explorermime-types

"Exploring the world of Typescript's return statements and the

I'm currently grappling with a design dilemma in typescript. Within my controller, I perform a validation process that can either return a 422 response, which ends the thread, or a validated data object that needs to be utilized further. Here's a ...

javascriptnode.jstypescript

I struggled to modify the image cropping code to specify a particular image

(I will attempt to explain my issue once again) I came across a script online which can be viewed at this link : Link However, I am having trouble modifying the code to suit my needs. The script currently starts working on image upload, but I want it t ...

javascripthtmljqueryajax

Detecting collisions on a pixel-by-pixel basis within Javascript/Jquery/Gamequery

Currently, I am working on developing a web game using Jquery with the GameQuery plugin. However, I have encountered an issue where the GameQuery plugin does not support per pixel collision detection, only bounding boxes collision detection. Is there a way ...

javascriptjquerycollision-detection

Prevent redundant Webpack chunk creation

I am currently working on integrating a new feature into my Webpack project, and I have encountered a specific issue. Within the project, there are two entry points identified as about and feedback. The about entry point imports feedback, causing both abo ...

javascriptwebpackimport