How can I make Switch/Case only look at specific breakpoint? - vue.js

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":
limitSize = 3;
break;
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();