tags: Vue.js ItIron2020

前言

昨天我們已經成功了做出了六個圖表，利用將整理成renderData讓我們印出的部分可寫得相當的簡潔~! 今天我們要做的就是讓畫面稍微微調一下，讓瀏覽不同圖表的過程更輕鬆一點! 內容會更加的簡短，我們馬上就開始吧!

認識vutify v-tab組件

v-tab顧名思義，就是我們一般網頁上切換不同顯示畫面的小按鈕，大致上來說分成兩個部分，更多的細節可以參考官方文件(個人認為舊版的寫得比較好)

1. v-tab容器，設定你要有幾個tab(v-tabs)
2. 每個tab的內容(v-tab-items)

我們先從官方文件上複製程式碼下來，看一下整個使用的情況就會更加了解了，請你在原本的h1標題下加入以下的程式碼

<v-tabs v-model="tab" background-color="primary" dark>
  <v-tab v-for="item in items" :key="item.tab">
    {{ item.tab }}
  </v-tab>
</v-tabs>

<v-tabs-items v-model="tab">
  <v-tab-item v-for="item in items" :key="item.tab">
    <v-card flat>
      <v-card-text>{{ item.content }}</v-card-text>
    </v-card>
  </v-tab-item>
</v-tabs-items>

並在data屬性中新增以下兩個變數

tab: null,
items: [
    { tab: 'One', content: 'Tab 1 Content' },
    { tab: 'Two', content: 'Tab 2 Content' },
    { tab: 'Three', content: 'Tab 3 Content' },
    { tab: 'Four', content: 'Tab 4 Content' },
    { tab: 'Five', content: 'Tab 5 Content' },
    { tab: 'Six', content: 'Tab 6 Content' },
    { tab: 'Seven', content: 'Tab 7 Content' },
    { tab: 'Eight', content: 'Tab 8 Content' },
    { tab: 'Nine', content: 'Tab 9 Content' },
    { tab: 'Ten', content: 'Tab 10 Content' },
]

此時你觀察一下你的畫面，你應該會看到一排相當突兀的玩意兒

打開你的vue-devtool，點選APP，觀察一下tab變數的變化(右下角)

注意到在上方的程式碼中，v-tabs & v-tabs-items都與tab變數做了雙向綁定，它就是利用這個原理去追蹤你目前選到哪個tab、要呈現什麼內容

利用v-tab組件整理我們的圖表

看完上方的說明之後，我想你應該猜到我們要怎麼用這個組件了，沒錯~! 我們要把每個圖表塞進v-tabs-items內! 請先將剛剛的demo code砍乾淨，我們先做v-tabs的部分! 不過在那之前，你會發現我們所要顯示label在之前的renderData屬性中已經寫過一次了! 既然都要用到 那還是先抽出來吧!

請你在data部分新增labels屬性並寫入以下的內容

labels: [
    'Positive',
    'Hoptialized',
    'InIcu',
    'OnVentilators',
    'Recovered',
    'Deaths',
 ]

並改寫一下renderData的部分，把原先宣告labels變數的地方拔掉，並在解構的部分加入labels

const {
    arrPositive,
    arrHoptialized,
    arrInIcu,
    arrOnVentilators,
    arrRecovered,
    arrDeaths,
    labels  // 加入這行
} = this

最後只要在我們的template部分加入(一樣加在h1下方)以下的程式碼，第一步驟就完成囉!

href屬性是為了讓tab的值更好懂，否則它只會根據你選擇的index來變動值，tab值就會是0、1、2、3而非我想要的#Positive、#Hoptialized

<v-tabs v-model="tab">
  <v-tab 
    v-for="item in labels" 
    :key="item" 
    :href="`#${item}`">
   {{ item }}
  </v-tab>
</v-tabs>

不過此時自然還沒有任何作用，我們需要在v-tabs-items中把圖表們塞進去，請在v-tabs下方加入以下的程式碼

<v-tabs-items v-model="tab">
  <v-tab-item
    v-for="chartData in renderData"
    :key="chartData.id"
    :value="chartData.label"
  >
    <v-card flat>
      <v-row v-if="arrPositive.length">
        <v-col cols="12">
          <h2>{{ chartData.label }}</h2>
          <LineChart
            :chartData="chartData.data"
            :options="chartOptions"
            :label="chartData.label"
            :chartColorOptions="chartData.chartColorOptions"
          />
        </v-col>
      </v-row>
    </v-card>
  </v-tab-item>
</v-tabs-items>

最終template部分程式碼為

 <template>
  <v-app>
    <v-main>
      <v-container>
        <v-card>
          <v-container>
            // 標題
            <h1>COVID-19 Tracking Dashboard</h1>
            
            // 建立tabs
            <v-tabs v-model="tab" background-color="primary" dark>
              <v-tab v-for="item in labels" :key="item" :href="`#${item}`">
                {{ item }}
              </v-tab>
            </v-tabs>
            
            // 建立每一個tabs的內容
            <v-tabs-items v-model="tab">
              <v-tab-item
                v-for="chartData in renderData"
                :key="chartData.id"
                :value="chartData.label"
              >
                // render每一個圖表
                <v-card flat>
                  <v-row v-if="arrPositive.length">
                    <v-col cols="12">
                      <h2>{{ chartData.label }}</h2>
                      <LineChart
                        :chartData="chartData.data"
                        :options="chartOptions"
                        :label="chartData.label"
                        :chartColorOptions="chartData.chartColorOptions"
                      />
                    </v-col>
                  </v-row>
                </v-card>
              </v-tab-item>
            </v-tabs-items>
          </v-container>
        </v-card>
      </v-container>
    </v-main>
  </v-app>
</template>

到這邊就大功告成啦! 一切都像我們之前的preview依樣正常運作~!

剩餘的樣式微調就交給你們自由發揮囉!

結語

我們今天順利的完成了這個簡單的tracking app，內容真的一點都不困難~甚至你不使用框架也能輕鬆達到類似的效果，我的作法自然不會是唯一、最乾淨的寫法，很多部分你也可以自己重構:D 做為一個開發者我還真~的菜得很，任何建議都歡迎提供的! 這個系列文其實節奏上掌握得蠻差勁的，我不確定一個完全的初學者到底能懂多少，之後寫類似的教學文章時我會再特別注意的! 那大家就掰掰啦，希望這系列文有多少幫到一些人!

此文章同步發布於個人部落格，有興趣的大大也可以來參觀一下:D