Change pricing based on whether checkbox is checked or not in Laravel - laravel

I am trying to calculate some shipping prices in Laravel. There are only two options based on weight and I have that working with an if/else statement. The client would like to add an option that if someone would like to ship their items faster and they are under the Priority weight, they can for the additional shipping cost. I set up a checkbox in my blade template but am not 100% sure how to implement it. I would assume I have to do some kind if isset statement.
Here is the code in my blade template:
#if( $total_weight <= 16.00)
<li class="payment__item">
<label for="priority">Priority Mail</label>
<span style="padding-top: 2.5%;">
<input type="checkbox" name="priority" value="1" {{ $shipping_cost['attributes']['priority'] == '10' ? 'checked="checked"' : '1'}} >
</span>
</li>
<li class="payment__item">Total:
<span>${{ number_format($payment_total + $shipping_cost, 2, '.', '')}} </span>
</li>
#else
<li class="payment__item">Total: <span>${{ number_format($payment_total + 10, 2, '.', '')}} </span>
</li>
#endif
And in my controller I have this for my public function:
public function showPayment() {
$cart = Session::get('cart');
$payment_info = Session::get('payment_info');
if($payment_info['status'] == 'on_hold' ) {
$total_weight = $cart->totalWeight;
// $shipping_cost = $cart->totalPrice + 5;
$sales_tax = $cart->totalPrice * .085 ;
$payment_total = $cart->totalPrice + $sales_tax;
return view('cart.payments', ['payment_info' => $payment_info, 'cartItems' => $cart, 'sales_tax' => $sales_tax, 'shipping_cost' => $shipping_cost, 'total_weight'=>$total_weight, 'payment_total' => $payment_total]);
}else{
return redirect()->route("home");
}
}
Any help is much appreciated.
Edit here is the data that is being passed

Use javascript to check if the checkbox is checked. If it is, then add the priority shipping cost to the total
var input = document.querySelector('input[type=checkbox]');
function check() {
var a = input.checked ? "{{$payment_info['price'] + number_format($sales_tax, 2, '.', '') + 10 }}" : "{{$payment_info['price'] + number_format($sales_tax, 2, '.', '') + 5 }} ";
document.getElementById('total').innerHTML = '$ ' + a;
}
input.onchange = check;
check();

Related

Conditional Component variable value increment Vue/Laravel

[1]so i have a laravel project going on, and i want to increment the value of the variable deliver_later_num, depending on the "deliver_today" present in the same component in the items[] array, which i am outputting in the template file, i cannot figure how to do it, i do not know if i can increment the value on the template side or on the component side. here is the component code:
cartContent = new Vue({
el: '#cartList',
data: {
items: [], //array containing all the items
deliver_later_num: 0, //value to increment
},
methods: {
remove: function (product_id) {
removeProductIfFromCart(product_id);
},
incQuantity: function (product_id){
incCart(product_id)
},
decQuantity: function (product_id){
decCart(product_id)
},
}
})
here is the template file :
<div id="cartList">
<div v-for="item in items" class="items col-xs-12 col-sm-12 col-md-12 col-lg-12 clearfix">
<div class="info-block block-info clearfix" v-cloak>
<div class="square-box pull-left">
<img :src="item.attributes.image" class="productImage" width="100" height="105" alt="">
</div>
<h6 class="product-item_title">#{{ item.name }}</h6>
<p class="product-item_quantity">#{{ item.quantity }} x #{{ item.attributes.friendly_price }}</p>
<ul class="pagination">
<li class="page-item">
<button v-on:click="decQuantity(item.id)" :value="item.id" class="page-link" tabindex="-1">
<i class="fa fa-minus"></i>
</button>
</li>
<li class="page-item">
<button v-on:click="incQuantity(item.id)" :value="item.id" class="page-link" >
<i class="fa fa-plus"></i>
</button>
</li>
<li class="page-item">
<button v-on:click="remove(item.id)" :value="item.id" class="page-link" >
<i class="fa fa-trash"></i>
</button>
</li>
<input hidden class="delivers_today_state" type="text" :value=" item.attributes.delivers_today "> // if this equals 0 i want to increment the deliver_later_num value
</ul>
</div>
</div>
</div>
laravel controller code :
public function add(Request $request){
$item = Items::find($request->id);
$restID=$item->category->restorant->id;
//Check if added item is from the same restorant as previus items in cart
$canAdd = false;
if(Cart::getContent()->isEmpty()){
$canAdd = true;
}else{
$canAdd = true;
foreach (Cart::getContent() as $key => $cartItem) {
if($cartItem->attributes->restorant_id."" != $restID.""){
$canAdd = false;
break;
}
}
}
//TODO - check if cart contains, if so, check if restorant is same as pervious one
// Cart::clear();
if($item && $canAdd){
//are there any extras
$cartItemPrice=$item->price;
$cartItemName=$item->name;
$theElement="";
//Is there a varaint
//variantID
if($request->variantID){
//Get the variant
$variant=Variants::findOrFail($request->variantID);
$cartItemPrice=$variant->price;
$cartItemName=$item->name." ".$variant->optionsList;
//$theElement.=$value." -- ".$item->extras()->findOrFail($value)->name." --> ". $cartItemPrice." ->- ";
}
foreach ($request->extras as $key => $value) {
$cartItemName.="\n+ ".$item->extras()->findOrFail($value)->name;
$cartItemPrice+=$item->extras()->findOrFail($value)->price;
$theElement.=$value." -- ".$item->extras()->findOrFail($value)->name." --> ". $cartItemPrice." ->- ";
}
Cart::add((new \DateTime())->getTimestamp(), $cartItemName, $cartItemPrice, $request->quantity, array('id'=>$item->id,'variant'=>$request->variantID, 'extras'=>$request->extras,'restorant_id'=>$restID,'image'=>$item->icon,'friendly_price'=> Money($cartItemPrice, env('CASHIER_CURRENCY','usd'),true)->format(),'delivers_today' => $item->deliverstoday ));
return response()->json([
'status' => true,
'errMsg' => $theElement
]);
}else{
return response()->json([
'status' => false,
'errMsg' => __("You can't add items from other restaurant!")
]);
//], 401);
}
}
public function getContent(){
//Cart::clear();
return response()->json([
'data' => Cart::getContent(),
'total' => Cart::getSubTotal(),
'status' => true,
'errMsg' => ''
]);
}
link to the items array vue dev tools screenshot
[1]: https://i.stack.imgur.com/smLRV.png
thanks for your precious help and time.
A computed property can be used if the deliver_later_num is only dependent on the presence/absence of deliver_today on elements of items array
cartContent = new Vue({
el: '#cartList',
data: {
items: {}
},
computed: {
deliver_later_num() {
let num = 0;
Object.keys(this.items).forEach(key => {
let item = this.items[key];
Object.keys(item).forEach(k => {
if(k === 'deliver_today' && item[k]) {
num++;
}
});
});
return num;
},
}

Laravel - Trying to get property 'is_approved' of non-object

In my Laravel-5.8 project I have this code
Controller
public function index()
{
$userCompany = Auth::user()->company_id;
$userEmployee = Auth::user()->employee_id;
$identities = DB::table('appraisal_identity')->select('id')->where('company_id', $userCompany)->where('is_current', 1)->first();
$currentstatus = AppraisalGoal::select('is_approved')->where('employee_id', $userEmployee)->where('appraisal_identity_id', $identities->id)->first();
$goals = AppraisalGoal::where('employee_id', $userEmployee)->where('appraisal_identity_id', $identities->id)->get();
$incompleteCount = $goals->filter(function($item) {
return ($item->is_approved == 0 || $item->is_approved == 2);
})->count();
return view('appraisal.appraisal_goals.index')->with(['goals' => $goals, 'incompleteCount' => $incompleteCount])->with('currentstatus', $currentstatus);
}
View
#foreach($goals as $key => $goal)
#if(in_array($goal->is_approved, [0, 2]))
<a class="btn btn-xs btn-info" href="{{ route('appraisal.appraisal_goals.edit', ['id'=>$goal->id]) }}">
Edit
</a>
#endif
#endforeach
<div class="row no-print">
<div class="col-12">
#if ($incompleteCount)
<i class="fas fa-arrow-right"></i> Publish
#endif
</div>
</div>
What I want to achieve is that when the page is loaded Edit and Publish buttons should only be visible when is_approved is 0 or 2.
Instead of seeing this I got this error:
Trying to get property 'is_approved' of non-object
How do I resolve it?
Thank you.
it looks like your query is not returning any result.
$goals = AppraisalGoal::where('employee_id', $userEmployee)->where('appraisal_identity_id', $identities->id)->get();
You can put an extra check to avoid this error
if(count($goals)){
$incompleteCount = $goals->filter(function($item) {
return ($item->is_approved == 0 || $item->is_approved == 2);
})->count();
}
else {
$incompleteCount = 0;
}
return view('appraisal.appraisal_goals.index')->with(['goals' =>
$goals, 'incompleteCount' => $incompleteCount])->with('currentstatus', $currentstatus);

BACKPACK Laravel manage extra columns in pivot table in a many-to-many relationship using Backpack CRUD

I'm using backpack for laravel and I'm trying to add/update some extra columns in a pivot table used in a many-to-many relationship.
Summarizing the context: I have a model Task, another model Machine and this intermediate pivot table machine_task containing the many-to-many relation between Task and Machine
In this machine_task there are machine_id, task_id and then boolean columns m (for 'monthly'), q (for 'quarterly'), b (for 'biannual') and y (for 'yearly').
This is what I have
In my Models/Task.php I've defined the m-2-m relationship
public function machines()
{
return $this->belongsToMany('App\Machine')->withPivot('m','q','b','y');
}
In /app/Http/Controllers/Admin/TaskCrudController.php I have the fields, the most relevant one being this
$this->crud->addField([ // n-n relationship
'label' => "Machines", // Table column heading
'type' => "select2_from_ajax_multiple_custom", // a customized field type modifying the standard select2_from_ajax_multiple type
'name' => 'machines', // the column that contains the ID of that connected entity
'entity' => 'machines', // the method that defines the relationship in your Model
'attribute' => "name", // foreign key attribute that is shown to user
'model' => "App\Models\Machine", // foreign key model
'data_source' => url("api/machines"), // url to controller search function (with /{id} should return model)
'placeholder' => "Select machine(s)",
'minimum_input_length' => 0,
'pivot' => true,
'dependencies' => ['building_id'], // this "Machines" field depends on another previous field value
]);
This works perfectly: When I create or update a Task, the AJAX call is made returning the right results, values are correctly added into the select2 input, and the pivot table machine_task is correctly filled and updated with task_id and machine_id when I click on the Save and back button.
But how to insert into the pivot table the extra values m,q,b,y alongside task_id and machine_id?
At the end of TaskCrudController.php I have
public function store(StoreRequest $request)
{
// your additional operations before save here
// What I should do here to get the pivot values into the request??????????????
$redirect_location = parent::storeCrud($request);
// your additional operations after save here
// use $this->data['entry'] or $this->crud->entry
return $redirect_location;
}
public function update(UpdateRequest $request)
{
// your additional operations before save here
// What I should do here to get the pivot values into the request??????????????
$redirect_location = parent::updateCrud($request);
// your additional operations after save here
// use $this->data['entry'] or $this->crud->entry
return $redirect_location;
}
In my modified version of select2_from_ajax_multiple I have added some rows with checkboxes for each of the options selected. Let's see in a screenshot for better understanding
select2_from_ajax_multiple_custom
In /vendor/backpack/crud/src/resources/views/fields/select2_from_ajax_multiple_custom.blade.php I initialize the values like this, and then I use jquery to update the rows synced with the select2 control, but I don't know how to associate the m,q,b,y checkboxes with each of the select2 selected options and to pass them to the request.
#if ($old_value)
#foreach ($old_value as $item)
#if (!is_object($item))
#php
$item = $connected_entity->find($item);
#endphp
#endif
<div id="div{{ $item->getKey() }}">
<span> {{ $item->getKey() }} {{ $item->{$field['attribute']} }} -- </span>
Monthly <input type="checkbox" id="m{{ $item->getKey() }}" name="m{{ $item->getKey() }}" value="1" #php if ($item->pivot['m'] == "1") echo "checked"; #endphp >
Quarterly <input type="checkbox" id="q{{ $item->getKey() }}" name="q{{ $item->getKey() }}" value="1" #php if ($item->pivot['q'] == "1") echo "checked"; #endphp>
Biannual <input type="checkbox" id="b{{ $item->getKey() }}" name="b{{ $item->getKey() }}" value="1" #php if ($item->pivot['b'] == "1") echo "checked"; #endphp>
Yearly <input type="checkbox" id="y{{ $item->getKey() }}" name="y{{ $item->getKey() }}"value="1" #php if ($item->pivot['y'] == "1") echo "checked"; #endphp> <br/>
#php
#endphp
</div>
#endforeach
#endif
Thank you very much in advance for your time and I hope you can help me! Kinda stuck with this!
I've been able to solve it, so I'll post the solution as it may be useful for others.
What I did,
In my TaskCrudController.php I added the underlying Task model
// add this to the use statements
use App\Models\Task;
then, also in TaskCrudController.php I made this
// Notice: You need to add this to "create" function as well, I'm just writing here the update function to keep it short.
public function update(UpdateRequest $request)
{
$redirect_location = parent::updateCrud($request);
foreach ($request->machines as $machine) {
$set= array('m'=>'0','t'=> '0', 's' => '0', 'a' => '0');
if (isset($request['m'])) in_array ($machine, $request['m']) ? $set['m'] = '1' : $set['m'] = '0';
if (isset($request['t'])) in_array ($machine, $request['t']) ? $set['q'] = '1' : $set['q'] = '0';
if (isset($request['s'])) in_array ($machine, $request['s']) ? $set['b'] = '1' : $set['b'] = '0';
if (isset($request['a'])) in_array ($machine, $request['a']) ? $set['y'] = '1' : $set['y'] = '0';
Task::find($request->id)->machines()->syncWithoutDetaching([$machine => $set]);
return $redirect_location;
}
// Code explanation:
// what we are doing basically here is to grab the $request data
// For example: In the $request we receive m[3] b[1,3] y[1] arrays
// meaning that for our task:
// Machine 1 has no monthly, no quarterly but biannual and yearly checkboxes checked
// Machine 3 has monthly, no quarterly, biannual and no yearly checkboxes checked
// with the loop above, we cast that incoming data into this structure
// $set would contain after the loop:
// '1' => ['m' => '0', 'q'=> '0', 'b' => '1', 'y' => '1']
// '3' => ['m' => '1', 'q'=> '0', 'b' => '1', 'y' => '0']
// with that, we updated the intermediate table using syncWithoutDetaching
Now let's see select2_from_ajax_multiple_custom.blade.php although I'm not posting all code (the rest is the same as select2_from_ajax_multiple standard field)
<div #include('crud::inc.field_wrapper_attributes') >
<label>{!! $field['label'] !!}</label>
#include('crud::inc.field_translatable_icon')
<select
name="{{ $field['name'] }}[]"
style="width: 100%"
id="select2_ajax_multiple_custom_{{ $field['name'] }}"
#include('crud::inc.field_attributes', ['default_class' => 'form-control'])
multiple>
#if ($old_value)
#foreach ($old_value as $item)
#if (!is_object($item))
#php
$item = $connected_entity->find($item);
#endphp
#endif
<option value="{{ $item->getKey() }}" selected>
{{ $item->{$field['attribute']} }}
</option>
#endforeach
#endif
</select>
// What I added is:
<div id="freq">
#if ($old_value)
#foreach ($old_value as $item)
#if (!is_object($item))
#php
$item = $connected_entity->find($item);
#endphp
#endif
<div id="div{{ $item->getKey() }}">
<span>{{ $item->{$field['attribute']} }} -- </span>
Monthly <input type="checkbox" id="m{{ $item->getKey() }}" name="m[]" value="{{ $item->getKey() }}" #php if ($item->pivot['m'] == "1") echo "checked"; #endphp >
Quarterly <input type="checkbox" id="q{{ $item->getKey() }}" name="q[]" value="{{ $item->getKey() }}" #php if ($item->pivot['q'] == "1") echo "checked"; #endphp>
Biannual <input type="checkbox" id="b{{ $item->getKey() }}" name="b[]" value="{{ $item->getKey() }}" #php if ($item->pivot['b'] == "1") echo "checked"; #endphp>
Yearly <input type="checkbox" id="y{{ $item->getKey() }}" name="y[]"value="{{ $item->getKey() }}" #php if ($item->pivot['y'] == "1") echo "checked"; #endphp> <br/>
</div>
#endforeach
#endif
</div>
// js code to add or remove rows containing the checkboxes (This needs to be put inside <script> tags obviously) $("#select2_ajax_multiple_custom_machines").on("select2:select", function(e) {
// add checkbox row
htmlRow = "<div id=\"div"+e.params.data.id+"\">"+"<span> "+e.params.data.text+"-- </span>"+" Monthly <input type=\"checkbox\" id=\"m"+e.params.data.id+"\" name=\"m[]\" value=\""+e.params.data.id+"\">";
htmlRow += " Quarterly <input type=\"checkbox\" id=\"q"+e.params.data.id+"\" name=\"q[]\" value=\""+e.params.data.id+"\">";
htmlRow += " Biannual <input type=\"checkbox\" id=\"b"+e.params.data.id+"\" name=\"b[]\" value=\""+e.params.data.id+"\">";
htmlRow += " Yearly <input type=\"checkbox\" id=\"y"+e.params.data.id+"\" name=\"y[]\" value=\""+e.params.data.id+"\"><br/>";
htmlRow += "</div>";
$("#freq").append(htmlRow);
});
$("#select2_ajax_multiple_custom_machines").on("select2:unselect", function(e) {
// remove checkbox row
$("#div"+e.params.data.id).remove();
});
And that's all, folks.
Hope it helps.

Getting only 1 radio button to be saved instead of 2

In my page I can have multiple addresses, but the user can only select one address.
The problem I'm having is that both my radio buttons are being saved instead of just one.
So if the user has 2 addresses then only one should have selected = 1 and the other address should be selected = 0, but at the moment both address = 1.
I haven't been able to only have 1 address selected and saved as such in the database. I know that I'm passing the ID of the selected radio button through, but I was hoping to have this happen.
E.G: When the user saves their first address that is then saved as their selected address (selected = 1) and any other addresses they add after that will be (selected = 0).
If they change their mind and want their second address to be the one they use then the select it and that will then become like this, address 1 (selected = 0) and address 2 will become (selected = 1).
I hope this made sense. If it didn't please let me know.
My form
#foreach($addresses as $address)
<div class="col-lg-4">
<form id="address-radio" action="{{ route('account.post.addresses.radio', $address->id) }}" method="post">
#csrf
<div class="form-check">
<input type="radio" class="form-check-input" name="address_option" id="address_{{ $address->id }}" {!! $address->selected == '1' ? 'checked' : '' !!}>
<label for="address_{{ $address->id }}" class="form-check->label">
#if(!empty($address->complex))
{{ $address->complex }} <br>
#endif
{{ $address->address }} <br>
{{ $address->suburb }} <br>
{{ $address->city }} <br>
{{ $address->province }} <br>
{{ $address->postal_code }} <br>
</label>
</div>
</form>
</div>
#endforeach
<script>
$(document).ready(function(){
$('input[type="radio"]').on('change', function(){
$(this).closest("form").submit();
})
})
</script>
and this is my function
public function postAddressesRadio(Request $request, $id)
{
$selected = Address::findOrFail($id);
$user_id = Auth::user()->id;
$not_selected = $selected->where('id', '!=', $id)
->where('user_id', $user_id)->get();
foreach($not_selected as $selected)
{
$selected->selected = "0";
}
if($request->address_option == 'on'){
$selected->selected = '1';
}
$selected->save();
return redirect()->back()->with('success', 'Address was updated');
}
So I've managed to do it. I'm not sure if there is a better way but this works.
In my function I did
public function postAddressesRadio(Request $request, $id)
{
$address = Address::findOrFail($id);
$user_id = Auth::user()->id;
$addresses = Address::where('user_id', $user_id)->get();
foreach($addresses as $address)
{
if($address->id == $id)
{
$address->selected = "1";
}else{
$address->selected = "0";
}
$address->save();
}

Vue.js sorting is not working when fetching from Laravel

Currently this is for listing customer data from database. Data is fetching using Laravel 5. At present data is fetching and listing properly. This page contains pagination, filter search and sorting functionality. My problem is sorting is not working properly. Could you please help me to sort out this issue? I am using Vue.js version 1.0.25
Here is the short code, only the sorting part
View
<th v-for="key in columns" #click="sortBy(key)" :class="{active: sortKey == key}">
#{{ colTitles[key] }}
</th>
<tr v-for="(index, item) in items | filterBy searchQuery | orderBy sortKey reverse">
........
JS
data: {
sortKey: '',
reverse: false,
.........
sortBy: function(sortKey) {
this.reverse = (this.sortKey == sortKey) ? ! this.reverse : false;
this.sortKey = sortKey;
}
Full code
dashboard.blade.php
<div class="container">
<div class="row">
<h1 class="page-header">{{ trans('messages.customerListPageHeadingLabel') }}</h1>
<div id="app">
<div class="form-group col-md-4">
<form id="search" class="form-inline">
<label for="query">{{ trans('messages.customerListPageSearchBox') }} </label>
<input name="query" class="form-control" v-model="searchQuery">
</form>
</div>
<br>
<table class="table table-hover table-bordered">
<thead>
<tr>
<th v-for="column in columns" #click="sortBy(column)">
#{{ colTitles[column] }}
</th>
</tr>
</thead>
<tbody>
<tr v-for="(index, item) in items | filterBy searchQuery | orderBy sortKey reverse">
<td>#{{ item.erp_id }}</td>
<td>#{{item.firstname}}</td>
<td>#{{item.lastname}}</td>
<td>#{{item.email}}</td>
<td>#{{item.phone_1}}</td>
<td>#{{item.status}}</td>
<td>#{{item.created_on}}</td>
</tr>
</tbody>
</table>
<nav>
<ul class="pagination">
<li v-if="pagination.current_page > 1">
<a href="#" aria-label="Previous"
#click.prevent="changePage(pagination.current_page - 1)">
<span aria-hidden="true">«</span>
</a>
</li>
<li v-for="page in pagesNumber"
v-bind:class="[ page == isActived ? 'active' : '']">
<a href="#"
#click.prevent="changePage(page)">#{{ page }}</a>
</li>
<li v-if="pagination.current_page < pagination.last_page">
<a href="#" aria-label="Next"
#click.prevent="changePage(pagination.current_page + 1)">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
Laravel Controller
public function listCustomers()
{
$results = Customer::select('id', 'erp_id', 'firstname', 'lastname', 'email', 'phone_1', 'status', DB::raw("DATE_FORMAT(created_at, '%d.%m.%Y %H:%i') AS created_on"))
->orderBy('id', 'desc')->latest()->paginate(25);
$response = [
'pagination' => [
'total' => $results->total(),
'per_page' => $results->perPage(),
'current_page' => $results->currentPage(),
'last_page' => $results->lastPage(),
'from' => $results->firstItem(),
'to' => $results->lastItem()
],
'data' => $results
];
return $response;
}
Vue JS
new Vue({
el: '#app',
data: {
sortKey: '',
reverse: false,
columns: ['erp_id', 'firstname', 'lastname', 'email', 'phone_1', 'status', 'created_on'],
colTitles: {'erp_id':'#lang('messages.customerListPageTableCustomerNo')', 'firstname':'#lang('messages.customerListPageTableFirstname')', 'lastname':'#lang('messages.customerListPageTableLastname')', 'email':'E-Mail', 'phone_1':'#lang('messages.customerListPageTablePhone')', 'status':'Status', 'created_on':'#lang('messages.customerListPageTableAddedDate')'},
pagination: {
total: 0,
per_page: 7,
from: 1,
to: 0,
current_page: 1
},
offset: 4,// left and right padding from the pagination <span>,just change it to see effects
items: []
},
ready: function () {
this.fetchItems(this.pagination.current_page);
},
computed: {
isActived: function () {
return this.pagination.current_page;
},
pagesNumber: function () {
if (!this.pagination.to) {
return [];
}
var from = this.pagination.current_page - this.offset;
if (from < 1) {
from = 1;
}
var to = from + (this.offset * 2);
if (to >= this.pagination.last_page) {
to = this.pagination.last_page;
}
var pagesArray = [];
while (from <= to) {
pagesArray.push(from);
from++;
}
return pagesArray;
}
},
methods: {
fetchItems: function (page) {
var data = {page: page};
this.$http.get('/list/customers', data).then(function (response) {
//look into the routes file and format your response
this.$set('items', response.data.data.data);
this.$set('pagination', response.data.pagination);
}, function (error) {
// handle error
});
},
changePage: function (page) {
this.pagination.current_page = page;
this.fetchItems(page);
},
sortBy: function(sortKey) {
this.reverse = (this.sortKey == sortKey) ? ! this.reverse : false;
this.sortKey = sortKey;
}
}
});
the last parameter of orderBy should be 1 or -1, while you provide either true or false with the value of reverse
https://jsfiddle.net/Linusborg/spwwxLvy/
change this:
this.reverse = (this.sortKey == sortKey) ? ! this.reverse : false;
to this:
this.reverse = (this.sortKey == sortKey) ? 1 : -1;
also change the initial value in data() accordingly.

Resources