DataBase/script/js/vue-search-block.js

var category_list = [];
var project_list = [];
var type_list = [];

$.ajax({
    url: "./script/php/get_category_list.php",
    type: "GET",
    async: false,
    contentType: "application/json",
    dataType: "json"
}).done(function(data) {
    category_list = data;
}).error(function(error) {
    console.log(error);
});

$.ajax({
    url: "./script/php/get_project_list.php",
    data: {
        category_id: get_object_value_to_list(category_list, 'category_id'),
    },
    type: "GET",
    async: false,
    contentType: "application/json",
    dataType: "json"
}).done(function(data) {
    project_list = data;
}).error(function(error) {
    console.log(error);
});

$.ajax({
    url: "./script/php/get_type_list.php",
    type: "GET",
    async: false,
    contentType: "application/json",
    dataType: "json"
}).done(function(data) {
    type_list = data;
}).error(function(error) {
    console.log(error);
});

const vm = Vue.createApp({});

vm.component('search-block', {
    data() {
        return {
            category_list: category_list,
            project_list: project_list,
            type_list: type_list
        }
    },
    template: `<section class="panel">
            <div class="panel-body">
                <div class="filter_for_project">
                    <div class="ui-group">
                        <ul class="button-group nav nav-pills nav-pills-primary" data-filter-group="category">
                            <li style="padding: 10px 15px;">
                                <label>工程類別:</label>
                            </li>
                            <li class="active">
                                <a class="button" data-filter="">any</a>
                            </li>
                            <filter-button v-for="item in category_list" v-bind:object="item.category_name"></filter-button>
                        </ul>
                    </div>
                </div>

                <div class="filter_for_search">
                    <div class="ui-group">
                        <ul class="button-group nav nav-pills nav-pills-primary" data-filter-group="project">
                            <li style="padding: 10px 15px;">
                                <label>專案類別:</label>
                            </li>
                            <li class="active">
                                <a class="button" data-filter="">any</a>
                            </li>
                            <filter-project-button v-for="item in project_list" v-bind:category_id="item.category_id" v-bind:object="item.project_name"></filter-project-button>
                        </ul>
                    </div>

                    <div class="ui-group">
                        <ul class="button-group nav nav-pills nav-pills-primary" data-filter-group="type">
                            <li style="padding: 10px 15px;">
                                <label>文件類別:</label>
                            </li>
                            <li class="active">
                                <a class="button" data-filter="">any</a>               
                            </li>
                            <filter-button v-for="item in type_list" v-bind:object="item.type_name"></filter-button>
                        </ul>
                    </div>
                </div>
            </div>
        </section>`
});

vm.component('filter-button', {
    template: `<li><a class="button" v-bind:data-filter="addDot">{{object}}</a></li>`,
    props: {
        object: String,
    },
    computed: {
        addDot() {
            return "." + this.object;
        }
    },

});

vm.component('filter-project-button', {
    template: `<li><a class="button" v-bind:data-filter="addDot">{{object}}</a></li>`,
    props: ["category_id", "object"],
    methods: {
        addClass(class_name) {
            return class_name + " " + this.category_id;
        }
    },
    computed: {
        addDot() {
            return "." + this.object;
        }
    },
});

// var $isotope_project = $('.filter_for_search').isotope({
//     itemSelector: '.project'
//   });

// var filters = {};

// $('.filter_for_project').on( 'click', '.button', function() {
//     var $this = $(this);
//     // get group key
//     var $buttonGroup = $this.parents('.button-group');
//     var filterGroup = $buttonGroup.attr('data-filter-group');
//     // set filter for group
//     filters[ filterGroup ] = $this.attr('data-filter');
//     // combine filters
//     var filterValue = concatValues( filters );
//     // set filter for Isotope
//     $isotope_project.isotope({ filter: filterValue });
//   });

// function concatValues( obj ) {
//     var value = '';
//     for ( var prop in obj ) {
//         value += obj[ prop ];
//     }
//     return value;
// }

function get_object_value_to_list(obj, key) {
    value_list = [];
    for(i=0; i<obj.length; i++){
        value_list.push(obj[i][key]);
    }
    return value_list
}