0
576
Views¿Cómo puedo hacer que Switch/Case solo mire un punto de interrupción específico?
Estoy ejecutando un interruptor/caso que mira el punto de interrupción de Vuetify, pero en lugar de simplemente tomar el nombre y darme el int que quiero, siempre termina tomando el número más alto para la variable "limitSize".
Esto es para un control deslizante de noticias en el que estoy trabajando donde, según el punto de interrupción, muestra uno, dos o tres elementos en el control deslizante. Intenté darle a la variable un valor predeterminado, pero eso no funcionó. Preferiría que fuera SM & down es 1, MD es 2 y LG & Up es 3, pero no estoy seguro de cuál es la forma correcta de lograrlo. Cualquier ayuda sería muy apreciada.
El siguiente es el Switch/Case que se encuentra dentro de una propiedad calculada. También adjunté una imagen de los resultados actuales del código (la imagen está en la ventana MD cuando quiero 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); } 
1 answers
Answer question0
Bueno, es porque le faltan declaraciones de break entre sus switch cases de cambio. Mire la sintaxis correcta de un bloque switch-case continuación:
Sintaxis de cambio de mayúsculas y minúsculas
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}.`); }Solución
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();Solución optimizada
También le sugiero que coloque los casos de puntos de interrupción md , lg y xl y el resto de los casos de puntos de interrupción en el caso default .
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();