index.vue

 <template>
  <section>
      <div class="custom-sel-outer"> 
        <div class="custom-sel"> 
       <select v-model="selectedClient"  @change="SelectedCustomerId($event)">
        <option value="none">Select Customer</option>
        <option v-for="(customer, index) in customers" v-bind:value="{ id: customer.KUNNR, name: customer.COLONIA}">{{customer.COLONIA}}</option>
       </select>
      </div> 
    </div>
    
    <div class="cart-sec">
    <i class="fa fa-shopping-cart"></i>   
    <div id="cd-cart">
      <ul>
        <div v-if="inCartItems.length > 0">
          <li v-for="inCartItem of inCartItems">
            {{ inCartItem.MATNR }} <span>{{ inCartItem.qty }}</span>
          </li>
          <button class="check-btn btn" @click="checkCustomerId()">Go to Checkout</button>
        </div>

        <div v-else>
          <li>Your Cart is Empty</li>
        </div>
     </ul>
    </div> 
    </div> 
<!-- {{ inCartItems }} -->
<div class="for-table-ids" v-if="selectedClient && selectedClient !== 'none'">
       <span>Client's Name : {{ selectedClient.name }}</span>
      <span>Client Id : {{ selectedClient.id }}</span>
    </div>

   <table class="table table-striped custom-table">
          <thead>
            <tr>
              <th>LINEA</th>
              <th>MATNR</th>
              <th>PRDHA2</th>
              <th>TYPE</th> 
              <th>Quantity</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(product, index) in products"> 
              <td>{{ product.LINEA }}</td>
              <td>{{ product.MATNR }}</td>
              <td>{{ product.PRDHA2 }}</td>
              <td>{{ product.TYPE }}</td>
              <td> 
                <div class="for-table-plus">
                  <button type="button" class="button hollow circle" data-quantity="minus" data-field="quantity" @click="decQty(index)">
                    <i class="fa fa-minus" aria-hidden="true"></i>
                  </button> 
                  <input class="input-group-field" type="number" name="quantity" v-bind:value="product.qty" v-bind:id="index"> 
                  <button type="button" class="button hollow circle" data-quantity="plus" data-field="quantity"  @click="incQty(index)">
                    <i class="fa fa-plus" aria-hidden="true"></i>
                  </button>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
  
</section>
</template>
<style scoped>
.custom-table td input{width:70px;padding:1px 6px;text-align:center}#cd-cart ul{max-width:100%;background:#fff;list-style:none;padding:15px 20px;width:100%}.cart-sec{position:relative;width:20px;height:20px;background:#fff;float:right;top:-42px;right:10px}div#cd-cart{position:absolute;top:20px;right:0;width:220px;display:none}.cart-sec:hover div#cd-cart{display:block}.cart-sec i{font-size:18px}#cd-cart li span{float:right}.check-btn{background:#53a9d8;padding:6px;width:100%;border-radius:4px;display:block;margin-top:10px;color:#fff;text-align:center;cursor:pointer}.custom-table button.button.hollow.circle i{font-size:8px;border:solid 2px #fff;border-radius:20px;width:16px;height:16px;line-height:12px}.custom-table button.button.hollow.circle{width:27px;padding:0 0 2px 1px;border:none;background:#3ea8d8;color:#fff;height:27px}.custom-sel{position:relative;display:table}.custom-sel:after{position:absolute;content:"";top:14px;right:10px;width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid #3ea8d8;pointer-events:none}.custom-sel select{padding:6px 30px 6px 10px;background:#fff;border:solid 1px #3ea8d8;border-radius:6px;-webkit-appearance:none;-moz-appearance:none;appearance:none}.for-table-plus{display:flex}.for-table-ids{display:flex;flex-grow:1;width:100%;background:#d8d9da;padding:5px 10px}.for-table-ids span{margin:0 20px 0 0;font-size:17px;letter-spacing:1px}.custom-sel-outer{padding:10px;background:#fff}.custom-sel-outer{padding:10px;background:#fff}
</style>
<script>

  import axios from 'axios';
  import Cookies from 'js-cookie';

  export default {
    layout: 'dashboard',
    name: 'dashboard',
    middleware: 'auth',
     mounted() {
        this.fetchProducts();
        this.fetchClients();
        this.getCartData();
    },
    data: () => {
      return {
        cart:[],
        CartItems:[],
        CartItemsUpdated:[],
        cartItemsIds:[],
        products: [],
        customers:[],
        inCart:[],
        errors: [],
        boxTwo: '',
        details:[],
        selectedClient: null,
        Id: '',
        currentPage: 1,
        perPage: 15,
        totalRows: 0,
        i: 0,
        searchKey: '',
      }
    },
    computed: {
      inCartItems() {
        return this.products.filter(function(product){
          return product.qty > 0;
        });
      }
    },
    methods: {
      fetchProducts(ctx, callback){
       this.$axios.get(`products`, this.data)
       .then(response => {
          // JSON responses are automatically parsed.
          this.products = response.data.data;
        })
        .catch(e => {
          this.errors.push(e)
        })
      },
      fetchClients(ctx, callback){
        this.$axios.get(`clients`)
       .then(response => {
          this.customers = response.data.data;
         // console.log(this.customers);
        })
        .catch(e => {
          this.errors.push(e)
        })
      },
      SelectedCustomerId(event) {
        /*Update client id on select customer from dropdown.*/
        //this.selectedClient = {id: this.selectedClient.id, name: this.selectedClient.name}
        var cartItem = {
            'client_id': this.selectedClient.id,
            'client_name': this.selectedClient.name
        }
        this.$axios.post('cart/client_update',cartItem)
           .then(function (response) {

        })
        .catch(e => {
            this.error = e.response;
        })
      },
      checkCustomerId(){
       
        if(this.selectedClient.id == undefined || this.selectedClient.id == 'none') 
        {
          alert("Please Select Customer")
          return false;
        }
        else{
          this.$router.push('/dashboard/checkout')
        }
      },
      getCartData()
      {
        const inCartCookie = Cookies.get('in_cart_items');
        if(typeof inCartCookie !== 'undefined') {
          this.inCartItems = JSON.parse(inCartCookie);
        }
      },
      incQty(index) {         
          
          this.products[index].qty++;
          Cookies.set('in_cart_items', this.inCartItems);     
      },
      decQty(index) {         
          if(this.products[index].qty <= 0) {
            return;
          }
          this.products[index].qty--;
          Cookies.set('in_cart_items', this.inCartItems);
      }
    }
  };
</script>

const inCartCookie = Cookies.get('in_cart_items');
  if(typeof inCartCookie !== 'undefined') {
    this.in_cart_items = JSON.parse(inCartCookie);
  }