Skip to content

Instantly share code, notes, and snippets.

@BrunoDSouza

BrunoDSouza/index.html

Created September 17, 2017 15:23
Show Gist options
  • Save BrunoDSouza/baac0c3e5798dca20146f3eaa4c02cc6 to your computer and use it in GitHub Desktop.
Save BrunoDSouza/baac0c3e5798dca20146f3eaa4c02cc6 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin Data bind with v-model and v-bind // source http://jsbin.com/jenezil
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Data bind with v-model and v-bind">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js"></script>
<style id="jsbin-css">
#name-Bruno{
color:red;
}
.active{
color:blue;
}
.test{
color : green;
}
</style>
</head>
<body>
<div class="container-fluid">
<br>
<div class="row">
<div class="col-sm-2">
<h4>Estados brasileiros</h4>
<select v-model="selected" multiple>
<option v-for="(i, state) in states"
v-bind:value=state>
{{state.nome}}
</option>
</select>
</div>
<div class="col-sm-2">
<table class="table">
<thead>
<tr>
<th colspan="2"> Estados </th>
</tr>
</thead>
<tbody>
<tr v-for="(i, state) in states" >
<td>{{i}} - {{state.nome}}</td>
<td>
<input type="checkbox" :value="state" v-model="selected">
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-sm-2">
<table class="table">
<thead>
<tr>
<th colspan="2"> Estados </th>
</tr>
</thead>
<tbody>
<tr v-for="(i, state) in states" >
<td>{{i}} - {{state.nome}}</td>
<td>
<input type="radio" v-bind:value="state" v-model="selected">
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-sm-2">
<h4>Estados Selecionados</h4>
<pre>{{selected | json}}</pre>
</div>
<div class="col-sm-2">
<h4>Table estados</h4>
<ul class="list-group">
<li class="list-group-item" v-for="(i, item) in selected">
{{i}} - {{item.nome}}
<span class="badge">{{item.uf}}</span>
</li>
<li class="list-group-item" v-if="selected.length == 0">
Nenhum estado selecionado
</li>
</ul>
</div>
<div class="col-sm-2">
<h4>Historico de log</h4>
<pre>{{ log | json}}</pre>
</div>
</div>
<script id="jsbin-javascript">
new Vue({
el: 'body',
data: {
name: 'Bruno D. Souza',
active: true,
selected: [],
states: [{"uf":"AC","nome":"Acre","selected": true},{"uf":"AL","nome":"Alagoas", "selected": true},{"uf":"AM","nome":"Amazonas"},{"uf":"AP","nome":"Amapá"},{"uf":"BA","nome":"Bahia", "selected": true},{"uf":"CE","nome":"Ceará"},{"uf":"DF","nome":"Distrito Federal"}],
log: [],
actives: [],
},
ready() {
this.loadSelecteds();
setTimeout(() => {
this.active = false;
}, 3000);
},
watch: {
states: {
handler(){
this.loadSelecteds();
},
deep:true
},
selected(value, oldValue){
this.log.push(value);
console.log({value, oldValue})
}
},
methods: {
loadSelecteds(){
this.actives = this.states.filter(s => s.selected === true)
}
}
});
</script>
<script id="jsbin-source-css" type="text/css">#name-Bruno{
color:red;
}
.active{
color:blue;
}
.test{
color : green;
}
</script>
<script id="jsbin-source-javascript" type="text/javascript">
new Vue({
el: 'body',
data: {
name: 'Bruno D. Souza',
active: true,
selected: [],
states: [{"uf":"AC","nome":"Acre","selected": true},{"uf":"AL","nome":"Alagoas", "selected": true},{"uf":"AM","nome":"Amazonas"},{"uf":"AP","nome":"Amapá"},{"uf":"BA","nome":"Bahia", "selected": true},{"uf":"CE","nome":"Ceará"},{"uf":"DF","nome":"Distrito Federal"}],
log: [],
actives: [],
},
ready() {
this.loadSelecteds();
setTimeout(() => {
this.active = false;
}, 3000);
},
watch: {
states: {
handler(){
this.loadSelecteds();
},
deep:true
},
selected(value, oldValue){
this.log.push(value);
console.log({value, oldValue})
}
},
methods: {
loadSelecteds(){
this.actives = this.states.filter(s => s.selected === true)
}
}
});</script></body>
</div>
</html>
Raw
jsbin.jenezil.css
#name-Bruno{
color:red;
}
.active{
color:blue;
}
.test{
color : green;
}
Raw
jsbin.jenezil.js
new Vue({
el: 'body',
data: {
name: 'Bruno D. Souza',
active: true,
selected: [],
states: [{"uf":"AC","nome":"Acre","selected": true},{"uf":"AL","nome":"Alagoas", "selected": true},{"uf":"AM","nome":"Amazonas"},{"uf":"AP","nome":"Amapá"},{"uf":"BA","nome":"Bahia", "selected": true},{"uf":"CE","nome":"Ceará"},{"uf":"DF","nome":"Distrito Federal"}],
log: [],
actives: [],
},
ready() {
this.loadSelecteds();
setTimeout(() => {
this.active = false;
}, 3000);
},
watch: {
states: {
handler(){
this.loadSelecteds();
},
deep:true
},
selected(value, oldValue){
this.log.push(value);
console.log({value, oldValue})
}
},
methods: {
loadSelecteds(){
this.actives = this.states.filter(s => s.selected === true)
}
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment