Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.4.2/Sortable.min.js"></script>  
<script src="https://npmcdn.com/vue-sortable@latest"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<meta name="description" content="VueSortable onUpdate Example">  
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>VueSortable</title>
</head>
<body>
  
  <div class="list-group" v-sortable="{ handle:'.handle', onUpdate: onUpdate }">
    <div class="list-group-item" v-for="answer in answers">
      <div class="input-group input-group-sm">
        <span class="input-group-addon handle" style=" cursor: pointer">
          Ans {{$index + 1}}
        </span>
        <input type="text" class="form-control" v-model="answer.title" placeholder="Answer">  
        <span class="input-group-btn">
        <button tabIndex="-1" class="btn btn-sm" type="button" @click="deleteAnswer(answer)">
          Remove
        </button>  
        </span>
      </div>
    </div>
    <div style="display:none"></div>
  </div>
 
  <button v-if="answers.length < 5" @click="addAnswer" class="btn btn-sm">Add Answer</button>
  <hr>
  
  <pre>{{answers|json}}</pre>
</body>
</html>
 
function Item (title){           
  this.title = title || ""; 
}
new Vue({
  el: 'body',
  data: {
    answers: [new Item('Hello'), new Item('World'), new Item()]
  },
  methods: {
    addAnswer: function(){
      this.answers.push(new Item(''));
    },
    deleteAnswer: function(answer){
      this.answers.$remove(answer)
    },
    onUpdate: function (event) {
       var movingElement = this.answers.splice(event.oldIndex, 1)[0];
       this.answers.splice(event.newIndex, 0, movingElement);
    }
  }
});
Output 300px

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

Dismiss x
public
Bin info
aldoromo88pro
0viewers