File
Login or Register via GitHub
<html><head> <meta charset="utf-8"> <title>JS Bin</title><script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script> </head><body > <div id="app"> <button @click="cloneLast">Clone Last Row</button> <table border=1 width='100%' > <tr> <th>Username</th> <th>City Name</th> <th>Country Name</th> <th>Action</th> </tr> <tr v-for="user in users"> <td> <span v-if="user.editmode"><input v-model="user.name"/></span> <span v-else>{{user.name}}</span> </td> <td> <span v-if="user.editmode"> <select v-model="user.city_id" required> <option v-for="option in getCityList(user.country_id)" :value="option.id">{{option.val}}</option> </select> </span> <span v-else>{{user.city}}</span> </td> <td> <span v-if="user.editmode"> <select v-model="user.country_id" required> <option v-for="option in getCountryList()" :value="option.id">{{option.val}}</option> </select> </span> <span v-else>{{user.country}}</span> </td> <td> <span v-if="!user.editmode"><button @click="edit(user)">Edit</button></span> <span v-else><button @click="save(user)">Save</button></span> </td> </tr> </table> {{ users }} </div></body></html>body { font-family: sans-serif;} new Vue({ el: '#app', data: { users: [ {name: 'Jhon', city:'Newyork', country: 'US', country_id:'23', city_id:'4'}, {name: 'Ali', city:'London', country: 'UK', country_id:'13', city_id:'33'}, {name: 'Raj', city:'Delhi', country: 'IN', country_id:'3', city_id:'11'}, ], }, methods: { edit :function(obj){ this.$set(obj, 'editmode', true); }, save : function(obj){ this.$set(obj, 'editmode', false); }, cloneLast:function(){ var lastObj = this.users[this.users.length-1]; lastObj = JSON.parse(JSON.stringify(lastObj)); lastObj.editmode = true; this.users.push(lastObj); }, getCityList : function(countryid){ alert('city list called '+countryid) return [ {id:'4', val:'Newyork', country_id:'23'}, {id:'33', val:'London', country_id:'13'}, {id:'11', val:'Delhi', country_id:'3'}, ].filter(function(o){ return o.country_id == countryid; }); }, getCountryList : function(){ alert('country list called') return [ {id:'23', val:'US'}, {id:'13', val:'UK'}, {id:'3', val:'IN'}, ]; }, } });
Output
You can jump to the latest bin by adding /latest to your URL
Keyboard Shortcuts
| Shortcut | Action |
|---|---|
| ctrl + [num] | Toggle nth panel |
| ctrl + 0 | Close focused panel |
| ctrl + enter | Re-render output. If console visible: run JS in console |
| Ctrl + l | Clear the console |
| ctrl + / | Toggle comment on selected lines |
| ctrl + ] | Indents selected lines |
| ctrl + [ | Unindents selected lines |
| tab | Code complete & Emmet expand |
| ctrl + shift + L | Beautify code in active panel |
| ctrl + s | Save & lock current Bin from further changes |
| ctrl + shift + s | Open the share options |
| ctrl + y | Archive Bin |
Complete list of JS Bin shortcuts | |
JS Bin URLs
| URL | Action |
|---|---|
| / | Show the full rendered output. This content will update in real time as it's updated from the /edit url. |
| /edit | Edit the current bin |
| /watch | Follow a Code Casting session |
| /embed | Create an embeddable version of the bin |
| /latest | Load the very latest bin (/latest goes in place of the revision) |
| /[username]/last | View the last edited bin for this user |
| /[username]/last/edit | Edit the last edited bin for this user |
| /[username]/last/watch | Follow the Code Casting session for the latest bin for this user |
| /quiet | Remove analytics and edit button from rendered output |
| .js | Load only the JavaScript for a bin |
| .css | Load only the CSS for a bin |
Except for username prefixed urls, the url may start with http://jsbin.com/abc and the url fragments can be added to the url to view it differently. | |
public
0viewers