繼續對 option 頁面，可以利用 tag 做簡單的影片搜尋 :

只會對 options 的 root.vue 進行修正

在 templdate 部分，增加下拉選單 :

<el-row>
    <el-select v-model="optionSelected" clearable  placeholder="請選擇">
        <el-option v-for="item in options" :key="item" :label="item" :value="item">
        </el-option>
    </el-select>
</el-row>

loadData 增加讀取下拉部分的程式碼 :

        loadData() {
            var vm = this;
            chrome.storage.sync.get("tempData", function(result) {

                if (result !== undefined) {
                    var tempData = result.tempData;

                    var jsonResult = [];
                    if (tempData !== undefined) {
                        jsonResult = tempData;
                    }
                    vm.videos = jsonResult;

                    var arr = [];
                    jsonResult.forEach(function(video){
                        arr =  [...arr, ...video.tags];
                    });
                    vm.options = arr.filter((v, i, a) => a.indexOf(v) === i);
                }
            });
        }

增加 filterdVideos 來根據條件篩選影片 :

    computed: {
		filteredVideos: function() {
			var vm = this;
			var optionSelected = vm.optionSelected;
			
			if(optionSelected.length==0) {
				return vm.videos;
			} else {
				return vm.videos.filter(function(video) {
					return video.tags.some(x=> x==optionSelected);
				});
			}
		}
	}

頁面上的 v-for videos 部分改使用 filteredVideos :

<el-row v-for="(video,index) in filteredVideos">

修正刪除影片功能，改搜尋 index 後移除影片 :

        deleteVideo(filteredIndex) {
            var vm = this;
            var video = vm.filteredVideos[filteredIndex];

            var index = vm.getVideoIndex(video.videoKey);

            if(index>=0){
                vm.videos.splice(index, 1);
                vm.saveData();
            }
        },
        getVideoIndex(videoKey){
            var vm = this;

            var tempIndex = -1;

            vm.videos.forEach(function(video,index){
                if(video.videoKey== videoKey){
                    tempIndex = index;
                }
            });
            return tempIndex;
        }

執行結果 :

收工，感謝收看 :) ~~~