I'm a newcomer to VueJS and I've encountered an issue when attempting to call the OrderBy method using VueJS.
My basic application is fetching a simple array of items that are being displayed in a table:
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>Test Vue.js</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="icon" type="image/ico" href="img/favicon.ico" />
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-12">
<h1>Test vueJs + Google Firebase</h1>
<hr class="" />
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="panel panel-primary">
<div class="panel-heading">Ajouter</div>
<div class="panel-body">
<form action="" id="formTest">
<div class="input-group input-group-lg">
<input name="name" id="name" type="text" class="form-control" placeholder="Nom">
</div>
<div class="input-group">
<input name="firstname" id="firstname" type="text" class="form-control" placeholder="Prénom">
</div>
<div class="input-group">
<input name="age" id="age" type="text" class="form-control" placeholder="Prénom">
</div>
<button type="submit" class="btn btn-success">Submit</button>
</form>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="panel panel-primary">
<!-- Default panel contents -->
<div class="panel-heading">Liste</div>
<!-- Table -->
<table id="list1" class="table">
<thead>
<th>
<a href="#" class="" @click="sortBy('id')">Id</a>
</th>
<th>
<a href="#" @click="sortBy('name')">Nom</a>
</th>
<th v-on="click: sortKey = 'age'">Age</th>
<th>Action</th>
</thead>
<tr v-for="user in users | orderBy sortKey">
<td>{{user.id}}</td>
<td>{{user.firstname}} {{user.name}}</td>
<td>{{user.age}}</td>
<td><button class="btn btn-primary" v-on:click="removeUser(user)">Supprimer</button></td>
</tr>
</table>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.js"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<script src="js/vue.min.js" type="text/javascript"></script>
<script src="js/notify.min.js" type="text/javascript"></script>
<!------>
<script src="https://www.gstatic.com/firebasejs/3.4.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.4.0/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.4.0/firebase-database.js"></script>
<!--<script src="https://www.gstatic.com/firebasejs/live/3.0/firebase.js"></script>-->
<script src="https://cdn.firebase.com/js/client/2.4.2/firebase.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "xxxxxxxxxxxxx",
authDomain: "xxxxxxxxxxxxx.firebaseapp.com",
databaseURL: "https://xxxxxxxxxxxx.firebaseio.com",
storageBucket: "xxxxxxxxxxxxx.appspot.com",
messagingSenderId: "xxxxxxxxxxxxxx"
};
firebase.initializeApp(config);
var usersRef = new Firebase('https://testfirebase-b6e80.firebaseio.com/users/');
var vm = new Vue({
el: '#list1',
data() {
return{
// Initializing users array
users: []
};
},
sortKey: '',
ready() {
// this works
this.sortKey = 'name';
},
methods: {
updateUsers() {
},
removeUser(item) {
// Removing from Firebase
//console.log('item : ');
//console.log(item);
//console.log('---------------');
usersRef.child(item.id).remove();
// this works
this.sortKey = 'age';
//this.users.$remove(item);
},
sortBy(_sortKey) {
// but this doesn't
this.sortKey = _sortKey;
console.log("SortKey " + this.sortKey);
}
}
});
setTimeout(() => {
///this doesn't work too
vm.sortKey = 'age';
console.log('timeout sortKey :'+vm.sortKey);
}, 3000);
Array.prototype.removeValue = function (name, value) {
var array = $.map(this, (v, i) => {
return v[name] === value ? null : v;
});
this.length = 0; //clear original array
this.push.apply(this, array); //push all elements except the one we want to delete
};
// Retrieving users on "child_added" event
usersRef.on('child_added', (snapshot) => {
//console.log(snapshot.val());
//Fetching the value added by Firebase
var item = snapshot.val();
item.id = snapshot.key();
console.log('id ' + item.id);
// Updating the users retrieved from firebase
// in VueJs data
vm.users.push(item);
}, (errorObject) => {
console.log("The read failed: " + errorObject.code);
});
// Reading the node deletion event
usersRef.on('child_removed', (snapshot) => {
//Fetching the value removed by Firebase
var item = snapshot.val();
// Retrieving the id of the deleted item
item.id = snapshot.key();
//console.log('id : ' + item.id);
//console.log(item);
// Modifying VueJs datas
vm.users.removeValue('id', item.id);
//Jquery Notification
$.notify(item.firstName + " " + item.name + " has been deleted", "success", {position: "top right"});
}, (errorObject) => {
console.log("The read failed: " + errorObject.code);
});
</script>
</body>
</html>
I would appreciate any assistance in understanding why my sortBy method isn't functioning properly. Thank you.