Vuejs Draggable : Comportement bizarre pour les input

Bonjour ,
j'utilise ce plugins https://github.com/SortableJS/Vue.Draggable/ pour reorganiser l'ordre d'une liste .
Mais quand j'ajoute une input type radio , je coche une ligne et je la deplace en haut
Le bouton radio revient sur sa dernière position coché

On peut voir ici le probleme :https://jsfiddle.net/amherve/nm6c25eg/5/

Merci pour votre aide

Salut,

ton problème vient du fait que l'attribut value de tes inputs est renseigné par l'index de ton v-for du coup les différentes valeurs possibles de ta liste changent d'id en fonction de l'ordonnancement que tu fais :
Au début tu as John(0), Joao(1), John(2), tu coches John (index =2), tu le drag en premier, il devient 0, mais la valeur choisie est 2...

Pour corriger ton probleme, tu définis par exemple dans tes data un selected, puis tu l'utilises en v-model.

Code:

---

1 2 3 4 5

<div v-for="(element,index) in list">{{element.name}} <button @click="remove(index)">X </button> <input type="radio" v-model="selected" name="drone" :value="element.name"> </div>

---

et

Code:

---

1 2 3 4 5

var vm = new Vue({ el: "#main", data: { selected: '', // ...

---

Merci pour votre réponse ça a résolu le problème, par contre dans cette même liste je voudrai ajouter la photo preview de ces utilisateurs qui est générer dynamiquement.

Code:

---

1 2 3 4 5 6

<div v-for="(element,index) in list">{{element.name}} <button @click="remove(index)">X </button> <input type="radio" v-model="selected" name="drone" :value="element.name"> <img class="q-item-image item_drag" v-model="element.name" v-bind:ref="'image'+parseInt( index )"/> </div>

---

dans la méthode de ma vue j'ai ça

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41

methods : { handleFilesUpload(){ let uploadedFiles = this.$refs.files.files;   //Adds the uploaded file to the files array for( var i = 0; i < uploadedFiles.length; i++ ){ this.files.push( uploadedFiles[i] ); }   //Generate image previews for the uploaded files this.getImagePreviews(); }, //Gets the preview image for the file. getImagePreviews(){   //Iterate over all of the files and generate an image preview for each one. for( let i = 0; i < this.files.length; i++ ){   //Ensure the file is an image file if ( /\.(jpe?g|png|gif)$/i.test( this.files[i].name ) ) {   //Create a new FileReader object let reader = new FileReader();   /*   Add an event listener for when the file has been loaded   to update the src on the file preview.   */ reader.addEventListener("load", function(){ this.$refs['image'+parseInt( i )][0].src = reader.result; }.bind(this), false);   /*   Read the data for the file in through the reader. When it has   been loaded, we listen to the event propagated and set the image   src to what was loaded from the reader.   */ reader.readAsDataURL( this.files[i] ); } } },

---

c'est la méthode getImagePreviews() qui génère la photo preview des utilisateurs si je met un v-model = element.name dans img, le drag ignore la photo , le nom de la photo et le radio bouton est bien draggué.

c'est le même problème...
ta photo est référencée avec l'index. Quand tu ordonnes tes éléments, leur index change, donc leur image aussi

j'ai ajouté une :key="file.name" sur la balise contenant le v-for pour que ça marche