How can I make Switch/Case only look at specific breakpoint?

Question

I'm running a switch/case that looks at the Vuetify breakpoint, but instead of just taking the name and giving me the int I want, it always ends up taking whatever the highest number is for the "limitSize" variable.

This is for a news slider I'm working on where, depending on the breakpoint, it shows either one, two, or three elements in the slider. I've tried giving the variable a default value, but that didn't work. I'd preferably like it to go SM & down is 1, MD is 2 and LG & Up is 3, but I'm not sure what the right way to achieve that is. Any help would be greatly appreciated.

The following is the Switch/Case which sits inside a computed property. I've also attached an image of the current results of the code (Image is on MD window when I'd want 2)

VueJS

   pageOfWhatsNews() {
      var limitSize;
      switch (this.$vuetify.breakpoint.name) {
        case "xs":
          limitSize = 1;
        case "sm":
          limitSize = 1;
        case "md":
          limitSize = 2;
        case "lg":
          limitSize = 3;
        case "xl":
          limitSize = 3;
      }
      var start = (this.currentPage - 1) * limitSize;
      var end = (this.currentPage - 1) * limitSize + limitSize;
      return this.whatsNews.slice(start, end);
    }

Answer 1

Well, it's because you are missing break statements in between your switch cases. Look at the correct syntax of a switch-case block below:

Switch-Case Syntax

const expr = 'Papayas';
switch (expr) {
  case 'Oranges':
    console.log('Oranges are $0.59 a pound.');
    break;
  case 'Mangoes':
  case 'Papayas':
    console.log('Mangoes and papayas are $2.79 a pound.');
    // expected output: "Mangoes and papayas are $2.79 a pound."
    break;
  default:
    console.log(`Sorry, we are out of ${expr}.`);
}

Solution

function pageOfWhatsNews() {
  var limitSize;
  switch (this.$vuetify.breakpoint.name) {
    case "xs":
      limitSize = 1;
      break;
    case "sm":
      limitSize = 1;
      break;
    case "md":
      limitSize = 2;
      break;
    case "lg":
      limitSize = 3;
      break;
    case "xl":
      limitSize = 3;
      break;
  }
  var start = (this.currentPage - 1) * limitSize;
  var end = (this.currentPage - 1) * limitSize + limitSize;
  
  console.log(limitSize);
  // return this.whatsNews.slice(start, end);
}

// Just for demo
this.$vuetify = {breakpoint: {name: 'md'}};
pageOfWhatsNews();

Optimized Solution

I would also suggest you put cases of md, lg & xl breakpoints and rest of the breakpoints case fallback to the default case.

function pageOfWhatsNews() {
  var limitSize;
  switch (this.$vuetify.breakpoint.name) {
    case "md":
      limitSize = 2;
      break;
    case "lg":
    case "xl":
      limitSize = 3;
      break;
    default: 
      limitSize = 1;
  }
  var start = (this.currentPage - 1) * limitSize;
  var end = (this.currentPage - 1) * limitSize + limitSize;
  
  console.log(limitSize);
  // return this.whatsNews.slice(start, end);
}

// Just for demo
this.$vuetify = {breakpoint: {name: 'sm'}};
pageOfWhatsNews();