Level 13
Have you compared your code with the table example in Vue's website?
Jun 16, 2015
5
Level 2
Vue.js and tables
I've tried using Vue.js and can get everything working a-ok except for the use of tables.
Whenever I use a v-repeat and wrap the element to be displayed with a tr, or td it fails to make the substitution.
Has anyone else managed to combine Vue and tables?
Level 2
I did have a look at that (I had copied it and got it running), but it uses a component. I'm unsure if this is a requirement for tables - is Vue.js incompatible with tables normally, or is it possible that I'm doing something wrong. I'm tending to the former because I can't see why simply wrapping a {{name}} in td tags would stop it from working.
Level 52
Table is a HTML structure as any other one. Here is a little example that uses 2 tables I've made for a tutorial (sory it's french) :
Take care : I had to change mustache {{ ... }} with simple { ... } to get the code in this forum !
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test vue.js</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body>
<div class="container" id="tuto">
<br>
<div class="panel panel-primary">
<div class="panel-heading">Personnes actives</div>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th class="col-sm-4">Nom</th>
<th class="col-sm-4">Prénom</th>
<th class="col-sm-2"></th>
<th class="col-sm-2"></th>
</tr>
</thead>
<tbody>
<tr v-repeat="personnes">
<td>{ nom }</td>
<td>{ prenom }</td>
<td><button class="btn btn-info btn-block" v-on="click: modifier($index)">Modifier</button></td>
<td><button class="btn btn-warning btn-block" v-on="click: supprimer($index)">Poubelle</button></td>
</tr>
<tr>
<td><input type="text" class="form-control" v-model="inputNom" v-el="modif" placeholder="Nom"></td>
<td><input type="text" class="form-control" v-model="inputPrenom" placeholder="Prénom"></td>
<td colspan="2"><button class="btn btn-primary btn-block" v-on="click: ajouter()">Ajouter</button></td>
</tr>
</tbody>
</table>
<div class="panel-footer">
 
<button class="button btn btn-xs btn-warning" v-on="click: toutPoubelle">Tout à la poubelle</button>
</div>
</div>
<div class="panel panel-danger" v-show="poubelle.length">
<div class="panel-heading">Poubelle</div>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th class="col-sm-4">Nom</th>
<th class="col-sm-4">Prénom</th>
<th class="col-sm-2"></th>
<th class="col-sm-2"></th>
</tr>
</thead>
<tbody>
<tr v-repeat="poubelle">
<td>{ nom }</td>
<td>{ prenom }</td>
<td><button class="btn btn-success btn-block" v-on="click: retablir($index)">Rétablir</button></td>
<td><button class="btn btn-danger btn-block" v-on="click: eliminer($index)">Supprimer</button></td>
</tr>
</tbody>
</table>
<div class="panel-footer">
 
<div class="btn-group">
<button class="button btn btn-xs btn-success" v-on="click: toutRetablir">Tout rétablir</button>
<button class="button btn btn-xs btn-danger" v-on="click: toutEliminer">Tout supprimer</button>
</div>
</div>
</div>
</div>
<script src="https://raw.githubusercontent.com/yyx990803/vue/0.12.0/dist/vue.min.js"></script>
<script>
var vm = new Vue({
el: '#tuto',
data: {
personnes: [
{nom: "Claret", prenom: "Marcel"},
{nom: "Dupont", prenom: "Albert"},
{nom: "Durand", prenom: "Jacques"},
{nom: "Martin", prenom: "Denis"},
{nom: "Torlet", prenom: "Arthur"}
],
poubelle: [],
inputNom: '',
inputPrenom: ''
},
methods: {
supprimer: function(index) {
this.poubelle.push(this.personnes[index]);
this.personnes.splice(index, 1);
this.poubelle.sort(ordonner);
},
retablir: function(index) {
this.personnes.push(this.poubelle[index]);
this.poubelle.splice(index, 1);
this.personnes.sort(ordonner);
},
eliminer: function(index) {
this.poubelle.splice(index, 1);
},
toutPoubelle: function() {
this.poubelle = this.poubelle.concat(this.personnes);
this.poubelle.sort(ordonner);
this.personnes = [];
},
toutRetablir: function() {
this.personnes = this.personnes.concat(this.poubelle);
this.personnes.sort(ordonner);
this.poubelle = [];
},
toutEliminer: function() {
this.poubelle = [];
},
ajouter: function() {
this.personnes.push({nom: this.inputNom, prenom: this.inputPrenom});
this.inputNom = this.inputPrenom = '';
this.personnes.sort(ordonner);
},
modifier: function(index) {
this.inputNom = this.personnes[index].nom;
this.inputPrenom = this.personnes[index].prenom;
this.personnes.splice(index, 1);
this.$$.modif.focus();
}
}
});
var ordonner = function (a, b) {
return (a.nom.toUpperCase() > b.nom.toUpperCase())
};
</script>
</body>
</html>
Level 13
@ColBatGuano, can you share your code? Otherwise it is difficult to guess what the problem is...
Level 2
Hi otepas, I'm not sure what the problem was, but I recreated my code following bestmomo's example, and I got it working.
Thanks a lot guys, really appreciated!
Please or to participate in this conversation.