gist

gistfile1.txt

<template>
    <ul class="list list-inline list-unstyled float-left ml-3">

        <!-- Button -->
        <button class="btn btn-ghost" data-toggle="dropdown">
            <i class="md-icon md-theme-default md-icon-font">add</i>
            Add Filter
        </button>

        <!-- Dropdown -->
        <div class="filter-list dropdown-menu form-group filter">
            <div class="row" @click.stop>
                <div class="col">
                    <template v-for="(filter, index) in optionalFilters">
                        <div class="form-check ml-2 mb-1" @click.stop>
                            <!--Bind the value of each of the optional filters to the model "value" on each filter-->
                            <input :id="filter.id" class="form-check-input" type="checkbox" v-model="optionalFilters">
                            <label :for="filter.id" class="form-check-label">{{ filter.displayName }}</label>
                        </div>
                    </template>
                </div>
            </div>
            <hr class="filter-divider"/>
            <div>
                <button class="btn btn-ghost btn-text">
                    <i class="md-icon-font md-icon md-theme-default">close</i>
                    Cancel
                </button>
                <button class="btn btn-primary btn-text float-right" @click="update">
                    Update
                    <i class="md-icon md-theme-default md-icon-font">navigate_next</i>
                </button>
            </div>
        </div>
    </ul>
</template>

<script>
    // Optional Filters
    export default {
      name: 'OptionalFilters',
      data: () => ({
        optionalFilters: [
          {
            id: 'statusFilter',
            displayName: 'Status Filter',
            value: false,
          },
          {
            id: 'leadStatusFilter',
            displayName: 'Lead Status Filter',
            value: false,
          },
          {
            id: 'createDateFilter',
            displayName: 'Created Date Filter',
            value: false,
          },
        ],
          // {
          //   id: 'createdDateFilter',
          //   displayName: 'Created Date',
          // },
          // {
          //   id: 'hasEmailFilter',
          //   displayName: 'Has Email',
          // },
          // {
          //   id: 'hasAddressFilter',
          //   displayName: 'Has Address',
          // },
          // {
          //   id: 'importantDateFilter',
          //   displayName: 'Important Date',
          // },
          // {
          //   id: 'birthdayFilter',
          //   displayName: 'Birthday',
          // },
          // {
          //   id: 'propertyAnniversaryFilter',
          //   displayName: 'Property Anniversary',
          // },
          // {
          //   id: 'weddingAnniversaryFilter',
          //   displayName: 'Wedding Anniversary',
          // },
          // {
          //   id: 'marketingPreferenceFilter',
          //   displayName: 'Marketing Preference Filter',
          // },
          // {
          //   id: 'lastContactedDateFilter',
          //   displayName: 'Last Contacted Date',
          // },
          // {
          //   id: 'gciEarnedFilter',
          //   displayName: 'GCI Earned Filter',
          // },
          // {
          //   id: 'tagsFilter',
          //   displayName: 'Tags Filter',
          // },
          // {
          //   id: 'mailingLabelFilter',
          //   displayName: 'Mailing Label Filter',
          // },
        // },
      }),
      methods: {
        update() {
          console.log(this.optionalFilters);
        },
      },
      computed: {

      },
    };
</script>