Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<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 citiesByCountry[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 countries" :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;
}
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers