Vue JS Filter Directory, built in WP with Timber and Twig

vue directory filter

/** template-directory.php file **/
<?php
/**
 * Template Name: Directory Template
 *
 * @package  WordPress
 * @subpackage  Timber
 * @since    Timber 0.1
 */
use Classes\Helper;

$context = Timber::get_context();

$post = new TimberPost();
$context['post'] = $post;
$meta = Helper::get_post_meta($post->ID);
$context['meta'] = $meta;
$post_thumbnail = get_the_post_thumbnail_url($post->ID, 'full');
$context['primary_img'] = ($post_thumbnail) ? $post_thumbnail : wp_get_attachment_url($context['settings']['default_primary_image'][0]);
$context['primary_img_alt'] = Helper::get_attached_media_alt($post->ID);

$argsatod = array (
  'post_type'   => array( 'directory' ),
  'post_status' => array( 'publish' ),
  'posts_per_page' => 50,
  'meta_query' => array(
    array(
        'key' => 'last_name',
        'value' => array( 'A', 'E'),
        'compare' => 'BETWEEN'
      )
    ),
    'orderby' => 'last_name',
    'order'   => 'ASC'
);

$context['directoryad'] = Timber::get_posts( $argsatod );

$argsetoh = array (
  'post_type'   => array( 'directory' ),
  'post_status' => array( 'publish' ),
  'posts_per_page' => 50,
  'meta_query' => array(
    array(
        'key' => 'last_name',
        'value' => array( 'E', 'I'),
        'compare' => 'BETWEEN'
      )
    ),
    'orderby' => 'last_name',
    'order'   => 'ASC'
);

$context['directoryeh'] = Timber::get_posts( $argsetoh );

$argsitol = array (
  'post_type'   => array( 'directory' ),
  'post_status' => array( 'publish' ),
  'posts_per_page' => 50,
  'meta_query' => array(
    array(
        'key' => 'last_name',
        'value' => array( 'I', 'M'),
        'compare' => 'BETWEEN'
      )
    ),
    'orderby' => 'last_name',
    'order'   => 'ASC'
);

$context['directoryil'] = Timber::get_posts( $argsitol );

$argsmtop = array (
  'post_type'   => array( 'directory' ),
  'post_status' => array( 'publish' ),
  'posts_per_page' => 50,
  'meta_query' => array(
    array(
        'key' => 'last_name',
        'value' => array( 'M', 'Q'),
        'compare' => 'BETWEEN'
      )
    ),
    'orderby' => 'last_name',
    'order'   => 'ASC'
);

$context['directorymp'] = Timber::get_posts( $argsmtop );

$argsqtot = array (
  'post_type'   => array( 'directory' ),
  'post_status' => array( 'publish' ),
  'posts_per_page' => 50,
  'meta_query' => array(
    array(
        'key' => 'last_name',
        'value' => array( 'Q', 'U'),
        'compare' => 'BETWEEN'
      )
    ),
    'orderby' => 'last_name',
    'order'   => 'ASC'
);

$context['directoryqt'] = Timber::get_posts( $argsqtot );

$argsutoz = array (
  'post_type'   => array( 'directory' ),
  'post_status' => array( 'publish' ),
  'posts_per_page' => 50,
  'meta_query' => array(
      array(
          'key' => 'last_name',
          'value' => 'U',
          'compare' => '>='
      )
    ),
  
    'orderby' => 'last_name',
    'order'   => 'ASC'
);

$context['directoryuz'] = Timber::get_posts( $argsutoz );

Timber::render( array( 'directory-two.twig' ), $context );

?>

/** directory.twig file **/

<div class="content-wrapper-directory">
    <article class="post-type-{{post.post_type}}" id="post-{{post.ID}}">
      <section class="article-content directory" aria-label="article">
        <div id="app" class="article-body directory-body">
          <div class="dir-filter">
            <div class="a-d"><a href="#" id="atod" v-on:click="makeActive('atodActive')">A - D</a></div>
            <div class="e-h"><a href="#" id="etoh" v-on:click="makeActive('etohActive')">E - H</a></div>
            <div class="i-l"><a href="#" id="itol" v-on:click="makeActive('itolActive')">I - L</a></div>
            <div class="m-p"><a href="#" id="mtop" v-on:click="makeActive('mtopActive')">M - P</a></div>
            <div class="q-t"><a href="#" id="qtot" v-on:click="makeActive('qtotActive')">Q - T</a></div>
            <div class="u-z"><a href="#" id="utoz" v-on:click="makeActive('utozActive')">U - Z</a></div>
          </div>
          
          <div id="a-d" class="dir-list tabcontent" v-show="isActiveTab('atodActive')">
            <div class="dir-heading">
              <div class="name-heading">Name</div>
              <div class="title-heading">Title</div>
              <div class="email-heading">Email</div>
              <div class="pnumber-heading">Phone Number</div>
            </div>
            {% set counter = 0 %}
            {% for employee in directoryad %}
            <div class="dir-row {{ cycle(["even", "odd"], counter) }}">
              <div class="emp-name {{ employee.id }}">{{employee.first_name}} {{employee.last_name}}</div>
              <div class="emp-title {{ employee.id }}">{{ employee.emp_title }}</div>
              <div class="emp-email {{ employee.id }}">{{ employee.email }}</div>
              <div class="emp-p-number {{ employee.id }}">{{ employee.phone_number }}</div>
            </div>
            {% set counter = counter + 1 %}
            <br/>
          {% endfor %}
          </div>

          <div id="e-h" class="dir-list tabcontent" v-show="isActiveTab('etohActive')" style="display:none">
            <div class="dir-heading">
              <div class="name-heading">Name</div>
              <div class="title-heading">Title</div>
              <div class="email-heading">Email</div>
              <div class="pnumber-heading">Phone Number</div>
            </div>
            {% set counter = 0 %}
            {% for employee in directoryeh %}
            <div class="dir-row {{ cycle(["even", "odd"], counter) }}">
              <div class="emp-name {{ employee.id }}">{{employee.first_name}} {{employee.last_name}}</div>
              <div class="emp-title {{ employee.id }}">{{ employee.emp_title }}</div>
              <div class="emp-email {{ employee.id }}">{{ employee.email }}</div>
              <div class="emp-p-number {{ employee.id }}">{{ employee.phone_number }}</div>
            </div>
            {% set counter = counter + 1 %}
            <br/>
          {% endfor %}
          </div>

          <div id="i-l" class="dir-list tabcontent" v-show="isActiveTab('itolActive')" style="display:none">
            <div class="dir-heading">
              <div class="name-heading">Name</div>
              <div class="title-heading">Title</div>
              <div class="email-heading">Email</div>
              <div class="pnumber-heading">Phone Number</div>
            </div>
            {% set counter = 0 %}
            {% for employee in directoryil %}
            <div class="dir-row {{ cycle(["even", "odd"], counter) }}">
              <div class="emp-name {{ employee.id }}">{{employee.first_name}} {{employee.last_name}}</div>
              <div class="emp-title {{ employee.id }}">{{ employee.emp_title }}</div>
              <div class="emp-email {{ employee.id }}">{{ employee.email }}</div>
              <div class="emp-p-number {{ employee.id }}">{{ employee.phone_number }}</div>
            </div>
            {% set counter = counter + 1 %}
            <br/>
          {% endfor %}
          </div>

           <div id="m-p" class="dir-list tabcontent" v-show="isActiveTab('mtopActive')" style="display:none">
            <div class="dir-heading">
              <div class="name-heading">Name</div>
              <div class="title-heading">Title</div>
              <div class="email-heading">Email</div>
              <div class="pnumber-heading">Phone Number</div>
            </div>
            {% set counter = 0 %}
            {% for employee in directorymp %}
            <div class="dir-row {{ cycle(["even", "odd"], counter) }}">
              <div class="emp-name {{ employee.id }}">{{employee.first_name}} {{employee.last_name}}</div>
              <div class="emp-title {{ employee.id }}">{{ employee.emp_title }}</div>
              <div class="emp-email {{ employee.id }}">{{ employee.email }}</div>
              <div class="emp-p-number {{ employee.id }}">{{ employee.phone_number }}</div>
            </div>
            {% set counter = counter + 1 %}
            <br/>
          {% endfor %}
          </div>

          <div id="q-t" class="dir-list tabcontent" v-show="isActiveTab('qtotActive')" style="display:none">
            <div class="dir-heading">
              <div class="name-heading">Name</div>
              <div class="title-heading">Title</div>
              <div class="email-heading">Email</div>
              <div class="pnumber-heading">Phone Number</div>
            </div>
            {% set counter = 0 %}
            {% for employee in directoryqt %}
            <div class="dir-row {{ cycle(["even", "odd"], counter) }}">
              <div class="emp-name {{ employee.id }}">{{employee.first_name}} {{employee.last_name}}</div>
              <div class="emp-title {{ employee.id }}">{{ employee.emp_title }}</div>
              <div class="emp-email {{ employee.id }}">{{ employee.email }}</div>
              <div class="emp-p-number {{ employee.id }}">{{ employee.phone_number }}</div>
            </div>
            {% set counter = counter + 1 %}
            <br/>
          {% endfor %}
          </div>

          <div id="u-z" class="dir-list tabcontent" v-show="isActiveTab('utozActive')" style="display:none">
            <div class="dir-heading">
              <div class="name-heading">Name</div>
              <div class="title-heading">Title</div>
              <div class="email-heading">Email</div>
              <div class="pnumber-heading">Phone Number</div>
            </div>
            {% set counter = 0 %}
            {% for employee in directoryuz %}
            <div class="dir-row {{ cycle(["even", "odd"], counter) }}">
              <div class="emp-name {{ employee.id }}">{{employee.first_name}} {{employee.last_name}}</div>
              <div class="emp-title {{ employee.id }}">{{ employee.emp_title }}</div>
              <div class="emp-email {{ employee.id }}">{{ employee.email }}</div>
              <div class="emp-p-number {{ employee.id }}">{{ employee.phone_number }}</div>
            </div>
            {% set counter = counter + 1 %}
            <br/>
          {% endfor %}
          </div>
          <div class="dir-pagination" v-if="choice === 'atodActive'">
            <div>
            &nbsp;
            </div>
            <div class="next">
              <a href="#" id="etoh" v-on:click="makeActive('etohActive')">Next</a>
            </div>
          </div>

          <div class="dir-pagination" v-else-if="choice === 'etohActive'">
            <div class="back">
              <a href="#" id="atod" v-on:click="makeActive('atodActive')">Back</a>
            </div>
            <div class="next">
              <a href="#" id="etoh" v-on:click="makeActive('itolActive')">Next</a>
            </div>
          </div>

          <div class="dir-pagination" v-else-if="choice === 'itolActive'">
            <div class="back">
              <a href="#" id="atod" v-on:click="makeActive('etohActive')">Back</a>
            </div>
            <div class="next">
              <a href="#" id="etoh" v-on:click="makeActive('mtopActive')">Next</a>
            </div>
          </div>

          <div class="dir-pagination" v-else-if="choice === 'mtopActive'">
            <div class="back">
              <a href="#" id="atod" v-on:click="makeActive('itolActive')">Back</a>
            </div>
            <div class="next">
              <a href="#" id="etoh" v-on:click="makeActive('qtotActive')">Next</a>
            </div>
          </div>

          <div class="dir-pagination" v-else-if="choice === 'qtotActive'">
            <div class="back">
              <a href="#" id="atod" v-on:click="makeActive('mtopActive')">Back</a>
            </div>
            <div class="next">
              <a href="#" id="etoh" v-on:click="makeActive('utozActive')">Next</a>
            </div>
          </div>

          <div class="dir-pagination" v-else-if="choice === 'utozActive'">
            <div class="back">
              <a href="#" id="atod" v-on:click="makeActive('qtotActive')">Back</a>
            </div>
            <div>
            &nbsp;
            </div>
          </div>

	</div>
       </section>
    </article>
</div>
{% endblock %}
{% block scripts %}
   <script>
    var app = new Vue({
        el: '#app',
        data: {
          choice: 'atodActive'
        },
        methods: {
            makeActive: function(val) {
                this.choice = val;
            },
            isActiveTab: function(val) {
              return this.choice === val;
            }
        }
    });
    </script>
{% endblock %}