我正在運行一個查看 Vuetify 斷點的 switch/case，但它不是只取名字并給我我想要的 int，它總是以“limitSize”變數的最高數字結束。
這是我正在處理的新聞滑塊，根據斷點，它在滑塊中顯示一個、兩個或三個元素。我試過給變數一個默認值，但這沒有用。我更喜歡 SM & down 為 1，MD 為 2，LG & Up 為 3，但我不確定實作這一目標的正確方法是什么。任何幫助將不勝感激。
以下是位于計算屬性內的 Switch/Case。我還附上了代碼當前結果的影像（當我想要 2 時，影像在 MD 視窗上）
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);
}
uj5u.com熱心網友回復：
好吧，這是因為您break在switch cases. 查看switch-case下面塊的正確語法：
Switch-Case 語法
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}.`);
}解決方案
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();優化方案
我還建議您將md, lg&xl斷點和其余斷點案例回退到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();轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/346190.html
標籤：Vue.js 切换语句 vuetify.js